With the HTML label tag, you improve your website’s usability and accessibility. label can be used for input fields, checkboxes, and radio buttons, among other things. It works with global attributes, event attributes, as well as for and form.

What is the HTML label tag used for?

For improved clarity and website accessibility, the HTML label tag plays a key role. It is used in forms to provide clear descriptions for elements such as input fields, radio buttons, and checkboxes.

This is especially important for two use cases:

  • It makes website navigation easier for visitors who have difficulty interacting with small clickable areas. Because the clickable area is larger, form elements are easier to select and use.
  • For users who rely on a screen reader, the HTML label tag ensures that form labels are read aloud correctly. This improves usability for all visitors to your website.

WCAG relevance of the label tag

HTML forms should not only be visually easy to understand, but also comply with the current standards for digital accessibility. The WCAG (Web Content Accessibility Guidelines) 2.2 require, for example, that all input fields be labelled or provided with clear instructions (Success Criterion 3.3.2 ‘Labels or Instructions’). This ensures that people with cognitive or visual impairments understand what input is expected.

In addition, WCAG Success Criterion 2.5.3 ‘Label in Name’ ensures that the visible label is also included in the program code as an accessible name. This is important for users who rely on assistive technologies or voice control.

Note

In the Republic of Ireland, digital accessibility requirements are primarily governed by the Disability Act 2005 and the European Union (Accessibility of Websites and Mobile Applications of Public Sector Bodies) Regulations 2020. Under these regulations, many digital offerings, including online forms, must be designed to be accessible and usable for people with disabilities. In practice, WCAG guidelines serve as the technical standard used to assess whether digital content meets these legal accessibility requirements.

How is the label tag in HTML used?

The label tag in HTML can be used in two different ways. Both methods ensure that assistive technologies such as screen readers correctly associate the label with its form control and allow users to click the label to focus the corresponding input field.

Explicit association (with for and id)

With the explicit method, you separate the label and the form field in the HTML, but link them using the for attribute with the input field’s id value. This option provides the best support from browsers and assistive technologies. For this reason, it is generally recommended as a best practice.

<p>
    <input type="checkbox" name="read" id="read" value="yes" />
    <label for="read">I have read the terms and conditions</label>
</p>
html

It’s important that the value of the for attribute matches the id attribute of the input field exactly.

Implicit association (input inside the label)

Alternatively, you can place the input field inside the <label> element. In this case, the association is created automatically without needing to set for and id. This option is also valid HTML, but it is not supported by all devices.

<p>
    <label>
        <input type="checkbox" name="read" value="yes" />
         I have read the terms and conditions
    </label>
</p>
html

Which elements are associated with the HTML tag for label?

To enable accessible access to your page for users with screen readers, for example, you should label the following elements in HTML with an HTML label (the label tag in HTML) in particular:

  • Input fields: <input type="text" />, <input type="password" />, <textarea>
  • Checkboxes: <input type="checkbox" />
  • Radio buttons: <input type="radio" />
  • Drop-down lists: <select>
  • Upload fields: <input type="file" />

Which attributes does the label tag in HTML support?

The HTML label supports all global HTML attributes as well as all event attributes. In addition, the following attributes can be associated with the HTML label:

  • for: The for attribute specifies the ID of the input element that the label should be associated with. The value of for must exactly match the value of the id attribute of another form control in the same document.
  • form: The form attribute can be useful in complex layouts where a label and its associated form control are not located within the same form element. In most accessible forms, however, it is not required. The recommended association is done using for / id or by nesting the input inside the label. The form attribute is not part of the standard attributes typically used with the HTML label tag in the HTML specification.
<form id="participant">
    <label for="first-name">First name</label>
    <input name="first-name" id="first-name" maxlength="25">
    <label for="last-name">Last name</label>
    <input name="last-name" id="last-name" maxlength="30">
    <button>Confirm details</button>
</form>
html
Go to Main Menu