Definition and Usage

The <label> tag represents a text label (or caption) for user interface control elements.

This tag provides a text label (or caption) for control elements, helping users understand them more easily while improving readability and web accessibility.

Basic Example

HTML 
<label for="user-id">User ID</label>
<input type="text" id="user-id"> <!-- This is a user interface control element -->
Rendered Output

Related Attributes

The <label> tag supports all global attributes and has one specific attribute called for.

for Attribute

The for attribute specifies which form control the label is associated with.
In other words, its value must be the same as the id of the corresponding control element.

Labelable Control Elements

The following control elements should be used with the <label> tag to improve readability and web accessibility.
These elements are referred to as labelable elements (labelable).

  • <input>: when the type attribute is not hidden, button, reset, or submit
  • <textarea>
  • <select>
  • <meter>
  • <progress>
  • <output>

The following controls are displayed as buttons and do not need to be used with the <label> tag:

  • <button>
  • <input type="button">
  • <input type="submit">
  • <input type="reset">

These elements already provide their own text labels (or captions), so using the <label> tag is unnecessary.

Benefits of Using the <label> Tag with Control Elements

Using the <label> tag with control elements is not required by HTML syntax, but associating a <label> with a control element plays a crucial role in improving web accessibility and user experience.

  • Screen reader support for accessibility: By matching the for attribute of the <label> with the id of the associated control element, assistive technologies can clearly associate the label with the control.
  • Enhanced user convenience: Clicking on a <label> moves focus to the associated control element, making it easier for users to interact with it.

Associating the <label> Tag with Control Elements

Example 1: Using the for Attribute

You can associate a <label> with a control element by setting the id of the control element as the value of the for attribute of the <label> tag. This links the <label> and the control element.

HTML 
<!--
    The control element's id "user-checking" is
    set as the value of the for attribute of the <label> tag.
-->
<label for="user-checking">Click Me</label>
<input type="checkbox" id="user-checking">

With this setup, clicking on the text of the <label> ("Click Me") will focus the associated checkbox.

Rendered Output Clicking on the <label> text ("Click Me") moves focus to the associated checkbox.

Example 2: Wrapping the Control Element

HTML 
<label>
    Click Me
    <input type="checkbox">
</label>

In this case, you do not need to set the for attribute. Clicking the <label> text ("Click Me") will still focus the checkbox.

Rendered Output Clicking on the <label> text ("Click Me") moves focus to the associated checkbox.

Both methods are valid according to the HTML specification.

When a <label> Cannot Be Associated with a Control Element

Control elements need a label to provide users with information about what action they should perform, which is crucial for web accessibility.
The <label> tag provides this functionality, but if you cannot use a <label> tag for some reason, you should use the title attribute to add a label.

Note:
The title attribute provides advisory information or instructions about an element. In some desktop browsers, this information is displayed as a tooltip

HTML 
<input type="text" title="Name" id="user-name">

Accessibility Considerations

As previously mentioned, the <label> tag helps improve readability and web accessibility for users. Even without additional styling, there is usually little visual difference.

Most browsers set the default value of the cursor CSS property for the <label> tag to default.

When using the <label> tag, accessibility should be considered carefully. Here are some important points to keep in mind:

Do Not Place Interactive Elements Inside a <label>

Do not place interactive elements such as <a> or <button> inside a <label>.
Doing so can interfere with a user's ability to access the control element associated with the label.

HTML Incorrect! 
<label>
    <input type="checkbox" name="privacy">
    <a href="privacy.html">I agree to the Privacy Policy</a>
</label>
HTML Correct! 
<label>
    <input type="checkbox" name="privacy">
    I agree to the Privacy Policy
</label>
<p><a href="privacy.html">View Privacy Policy</a></p>

Do Not Use a <label> for Button Elements

Button elements such as <button>, <input type="button">, <input type="submit">, and <input type="reset"> already have their own label text. Adding a <label> can interfere with screen readers and other assistive technologies, reducing accessibility.

When There Is No Associated Control Element

The <label> tag represents a label for user interface control elements. Therefore, the following cases are considered invalid markup:

  • The <label> is used without an associated control element.
  • The <label> is associated with more than one control element, rather than a one-to-one association.
  • The associated element is not a labelable element (labelable).

Technical Syntax Summary

Technical Syntax Summary of the <label> tag
Permitted parents Flow content, but a <label> tag cannot be a descendant of another <label> tag.
Permitted content Flow content, but <label> tags are not allowed as content, and control elements that are already associated with another <label> are also not permitted as content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted

Browser compatibility

Browser compatibility for the label tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<label> 1 12 1 4

Specifications

Specification for the label tag
Specification
<label> HTML Standard
#the-label-element

References

See also