label (HTML element)

Description

The label element is invisible to users (unless it’s styled with CSS, or behavior is attached to it via JavaScript and the DOM). By default, applying a label to a form control’s descriptive text makes no difference to its visual appearance. However, there are other benefits to be gained by explicitly linking the text to the form control using the label:

• It provides a usability improvement for mouse users. In the majority of current web browsers, the text that’s associated with a given form control (by being contained within the <label> and </label> tags) also becomes a clickable area. Thus, if the form control is something small, like a checkbox or radio button, you can massively increase the “hit area” for the mouse user by applying a label to it.
• It improves accessibility. By adding a label to all controls, you make the controls’ purpose clear to users of assistive technology (for example, visually impaired users reading the page through a screen reader). If the form controls aren’t linked to their associated text descriptions in this way, the assistive technology may need to hazard a guess as to which control goes with which description, depending on the layout of the web page and/or the source order of the markup to make its interpretation.

Note that there are two ways (implicit and explicit association) in which you can use the label element, both of which are detailed in the section on the for attribute. Explicit association, using the for attribute, is the safer option.

Use This For …

label is used to link the descriptive text for a given form control directly to that control.

Compatibility

Every browser listed supports this element type.

Safari 2 and earlier versions didn’t support the feature that allows users to click on a label to focus on the associated form control, but thankfully, this functionality was added in version 3.