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
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.
<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>
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
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>
<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.
We could use the following code to add this label to an input field using the
<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
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.
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
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
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.
<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.
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!