HTML Label: A Step-by-Step Guide

The HTML label tag is used to define a caption for an element in an HTML form. It’s accessed with the <label> tag, and are linked to a particular web form. When clicked they allow the user to engage with a form. 

When you’re creating forms in HTML, you may decide that you want to add a caption to the fields inside a form. For instance, you may want a form field that asks for a customer’s first name to have the caption Forename:.

That’s where the HTML <label> tag comes in. The <label> tag is used to define a caption for a form control element in an HTML form. Each label is associated with one specific element in a form.

This tutorial will discuss, with reference to examples, how to use the HTML label tag to add a label to a form. By the end of reading this tutorial, you’ll be an expert at creating form labels using HTML.

HTML Label

The <label> tag adds a label to a particular form element in a form. Each label tag is associated with one form element through the for HTML attribute.

There are a few reasons why using the <label> tag is important. First, the label is bound to a particular form field on a web page. This means that, if a screen reader encounters the form field, the contents of the label you specify will be read out to the user. This, in turn, makes your website more accessible.

In addition, when a <label> tag is associated with a form field, the user can click on the text within the label to activate the form. This makes it easier for the user to start interacting with a form field because they don’t have to directly click on the element. 

For instance, if you had a checkbox element with no <label> tag, the user would have to click directly inside the checkbox to activate the element. However, if you specified a <label> tag, the user could also click on the label to activate the checkbox.

HTML Label Syntax

The syntax for the HTML <label> tag is as follows:

<label for="id">Label contents</label>

The for attribute is used to associate a label with a particular <input> element. The value of the for attribute should be equal to the input id attribute used by an <input> element.

You can also place an <input> field inside a label to associate the input form with the label, instead of using the for attribute. The syntax for this is as follows:

<label>Label contents
	<input type="text">
</label>

The HTML <label> tag supports all global attributes in HTML. In addition, the <label> tag is supported in all major browsers.

HTML Label Examples

Suppose we are creating a web form field that asks a user for their email address.

We want the form field to appear with the label What is your email address? There are two approaches we could use to accomplish this task: use the for attribute or use a nested label.

for Attribute

We could use the following code to add this label to an input field using the for attribute:

<label for="email_address">What is your email address?</label><br />
<input type="text" id="email_address">

Our code returns the following:

Let’s break down our code.

On the first line, we have used a <label> tag to add the label What is your email address? to our web form. We specified the for attribute and assigned it the value email_address, which links the label to our form field with the id email_address.

At the end of the line, we used a <br /> tag to insert a blank horizontal line into our code.

On the next line, we created a text input field using the <input> tag. This input field has the id email_address, which we use to associate the input field with a label.

Nested Label

Alternatively, we can use an <input> tag nested in a <label> tag to create our label. Here’s the code we would use to create a nested label for our above web form:

<label>What is your email address?<br />
	<input type="text"/>
</label>

Our code returns:

Our form is visually the same as our first example. However, in this example, we do not use the for attribute to link our label to our form. Instead, we place our <input> tag inside of a <label> tag, which links the two HTML tags together.

HTML Label Accessibility

There are a few accessibility notes you should keep in mind as you are designing a label using the <label> tag.

First, headings should not be placed within a <label> tag. This is because heading elements inside <label> tags can interfere with screen reading technologies and other tools used to promote web accessibility. So, if you want to add a heading to a form label, you should do so outside of any <label> tags.

Second, you should not place any buttons or links inside a <label> tag. This is because interactive elements inside a <label> tag can make it confusing for the user to understand how the web form works. If a button is available inside a <label>, for example, it may make the user think they need to click the button to interact with the web form.

Conclusion

The HTML <label> tag is used to create form labels. These labels are linked to a particular web form, and, when clicked, allow the user to engage with a form. 

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

This tutorial walked through, with reference to examples, how to use the HTML <label> tag to add labels to a form element, as well as accessibility concerns associated with the <label> tag. Now you have the knowledge you need to start working with labels in HTML like a pro!