HTML label Attribute

The HTML label attribute provides a user-readable label for an option group, an individual option, or a text track associated with audio or video content.

Elements That Use the label Attribute

The label attribute is used with the <optgroup>, <option>, and <track> elements. Its exact purpose depends on the element.

Element	Description
`<optgroup>`	Provides a user-readable label for a group of options.
`<option>`	Provides a label representing the meaning of an individual option.
`<track>`	Provides a user-readable title for a text track.

Using label with <optgroup>

On an <optgroup> element, the label attribute gives a name to a group of related options. Browsers can display this label to visually organize the choices in a <select> menu.

<select name="plant">
  <optgroup label="Vegetables">
    <option value="tomato">Tomato</option>
    <option value="pepper">Pepper</option>
  </optgroup>
  <optgroup label="Flowers">
    <option value="rose">Rose</option>
    <option value="tulip">Tulip</option>
  </optgroup>
</select>

For a traditional <optgroup>, the label attribute supplies the group name. In a customizable <select>, an <optgroup> can instead use a child <legend> element, which takes precedence over the label attribute.

Using label with <option>

On an <option> element, the label attribute provides the label representing that option. If the attribute is omitted or empty, the option's text content is used as its label.

<select name="size">
  <option value="s" label="Small">Small Size</option>
  <option value="m" label="Medium">Medium Size</option>
  <option value="l" label="Large">Large Size</option>
</select>

The label identifies the option for display, while the value attribute determines the value submitted with the form when that option is selected.

Using label with <track>

On a <track> element, the label attribute provides a user-readable title for the text track. Browsers can display this title when allowing users to choose between subtitles, captions, or other available tracks.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English">
  <track src="captions-es.vtt" kind="captions" srclang="es" label="Spanish">
</video>

If the label attribute is present on <track>, its value must not be empty.

label Attribute vs. <label> Element

The label attribute should not be confused with the HTML <label> element. They serve different purposes.

Feature	Description
`label` attribute	Provides a user-readable label for an `<optgroup>`, `<option>`, or `<track>` element.
`<label>` element	Provides a caption for a labelable form control, such as an `<input>` or `<select>`.

Common Mistakes

Do not confuse the label attribute with the <label> element. The attribute labels specific elements such as <optgroup>, <option>, and <track>, while the element is used to label form controls.

Do not confuse an <option> element's label with its value. The label represents the option to the user, while the value is used when the form data is submitted.

Do not give a <track> element an empty label value. If the attribute is present, it must contain a user-readable title.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The label attribute is widely supported on the elements where it applies, including <option>, <optgroup>, and <track>.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the label Attribute

The example uses label on <optgroup> elements to organize related options into named groups within a selection menu.

Play in Editor

Summary

The HTML label attribute provides a user-readable label for the <optgroup>, <option>, and <track> elements. It can name a group of related options, provide the label for an individual option, or identify a text track in a browser's media controls.