label

label attribute

The label attribute in HTML serves different purposes based on the element it is associated with:

• <option> tag: In a <select> dropdown, the label attribute specifies a user-friendly name for the option, especially useful when the option’s value is less descriptive (e.g., a code).
• <optgroup> tag: This tag groups related options within a <select>. The label attribute is required and defines the name of the group, usually styled differently and non-selectable.
• <track> tag: Used with media elements like <audio> and <video>, the label provides a title for the track (e.g., subtitles or captions), helping users identify different text tracks in a media player.

Syntax

<tagname label="text">

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>

Definition and Usage

The label attribute defines the title of the text track.

This title is used by the browser when displaying available text tracks.

Values

• text
  • The title of a track or a brief label for the text.

Applies To

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

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

Conclusion

The label attribute in HTML provides descriptive names for elements like <option>, <optgroup>, and <track>, enhancing accessibility and user experience. It clarifies the purpose of options, groups, and text tracks. This attribute helps improve navigation, especially in forms and media elements.