HTML <label> tag

Accessibility is a big thing in the world wide web. Fortunately, HTML is designed a certain way (and continues to be as it changes over time) that provides for a high level of accessibility.

This lesson focuses on:

The <label> tag
What is the purpose of the <label> tag?

The <label> tag

The <label> tag is a special tag that sets the text of form elements.

The <label> tag should sorround the text that will appear for a form element. The form element for which the text is specified should be set using the for attribute which takes the same value as the value set for the id attribute of that particular form element.

Example:

<form> <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" /> </form>

Output:

In the above example, we set the for attribute of the <label> tag with the value "fname". This is the id of the form element for which the text in the <label> tag is specified. The textbox with the id "fname" will be labeled with the text "First Name:"

Another way to achieve the same effect is like this:

Choose a browser: <form> <label for="ff"> <input type="radio" name="browser" id="ff" /> Firefox </label> <label for="ie"> <input type="radio" name="browser" id="ie" /> Internet Explorer </label> </form>

Output:

Choose a browser:

The difference in this example from the first one is that in this example we actually include the form element within the <label> tag.

What is the purpose of the <label> tag?

So then what is the purpose of the <label> tag? Can't we just include some text for a form element next to it?

Technically, we can. But using the <label> tag puts things into a clearer context and is a good usability practice which has some benefits to it.

Benefits of using the <label> tag:

Forms accessible to screen readers
A screen reader is a program that enables people with visual problems to access a computer. The screen reader will provide information to a visually impaired user through speech or braille. By simply including a bunch of text next to form elements, the screen reader will read the form as simply a bunch of items like "name", "email", "location" followed by a list of form element names like "input box name", "input box email", "input box location". But when you use the <label> tag, the screen reader knows which text is associated with which form element and will read each label with its proper form element accordingly.
Form elements easier to click on
Without using the <label> tag, to access a form element you have to click on it. But when you use the <label> tag, you can actually click on a form element or a form elements label to access it. In both examples on this page try clicking on the text associated with each form element and notice how the elements will become accessible.