HTML label Attribute

Description

The HTML label attribute is used to define a label for several elements. However, its association and behavior differ based on the specific elements it is used with, such as <option>, <optgroup>, and <track>. Below is an explanation of how the label attribute functions when used with these three tags:

• <option> tag: When used with the <option> element within a <select> dropdown list, the label attribute specifies the label to be shown for the option. This can be particularly useful for providing a more readable or descriptive label for the options presented to the user, especially when the option's value might be an identifier or code that is not inherently descriptive.

• <optgroup> tag: The <optgroup> element is used to group together options within a <select> list, making it easier for users to navigate large lists of options. The label attribute is required for <optgroup> and specifies the label for the group of options. This label is typically displayed in a manner that visually differentiates it from the options, often as non-selectable text that is styled differently (such as being bolded).

• <track> tag: The <track> element is used with <audio> and <video> elements to specify text tracks for media elements, such as captions, subtitles, or descriptions. The label attribute for <track> provides a title for the text track. This title can be displayed by media players in their track selection menus, allowing users to choose between different text tracks based on their description. This is particularly useful for providing multiple language options for subtitles or for distinguishing between different kinds of text tracks (for example, standard subtitles versus descriptive subtitles for the hearing impaired).

In summary, the label attribute serves as a way to provide a descriptive or readable name for elements or groups of elements within HTML forms and media elements, enhancing usability and accessibility for users.

Syntax

<tagname label="text">

Values

• textTitle of a track or short label of the text.

Applies To

The label attribute can be used on the following html elements.

• <track>
• <option>
• <optgroup>

Example

<select id="fruitList">

  <option value="apple" label="Red Apple">Red Apple</option>

  <option value="banana" label="Banana">Banana</option>

  <option value="orange" label="Orange">Orange</option>

</select>

Browser Support

The following table will show you the current browser support for the HTML label Attribute.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes

Last updated by CSSPortal on: 29th March 2024