HTML label Attribute

The label attribute provides a title for a <track>. It is also used to create a shorter version of the text in an <option>, and also as the title of an <optgroup>.

Example

#

A label attribute on a <track> element.
The text track is labeled Spanish subtitle.

<video controls="controls" width="320" height="176">
  <source src="/media/godfather.mp4" type="video/mp4" />
  <source src="/media/godfather.ogg" type="video/ogg" />
  <track src="/media/godfather.srt" kind="subtitles" srclang="es" label="Spanish subtitle" />
</video>

For additional details see our HTML track label Reference.


Using label

The label attribute specifies an additional description about the element.

For a <track> element, the label specifies the text track title.

For an <option> element, the label is used as shorter version of the text.

For an <optgroup> element, the label is used as the title of the group.


Syntax

<tagname label="text">

Values

#

Value Description
text Title of a track or short label of the text.

Elements that accept label

The following elements accept the label attribute.

Elements Description
<track> Adds a text tack -- see example above
<option> Specifies a dropdown option.
<optgroup> Groups related options inside the dropdown.

<option> with label

An <option> tag with a label attribute.
The shorter label value is displayed rather than the option content.

<select>
  <option>-- Select Country --</option>
  <option value="1" label="USA">United States of America</option>
  <option value="2" label="UK">United Kingdom</option>
  <option value="3" label="UAE">United Arab Emirates</option>
</select>

For additional details see our HTML option label Reference.


<optgroup> with label

Two <optgroup> tags with a label attribute.
The label values are the titles of the option groups.

<select>
  <option value="">-- Select City --</option>
  <optgroup label="Europe">
    <option value="stockholm">Stockholm</option>
    <option value="barcelona">Barcelona</option>
    <option value="athens">Athens</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="bangkok">Bangkok</option>
    <option value="manila">Manila</option>
    <option value="jakarta">Jakarta</option>
  </optgroup>
</select>

For additional details see our HTML optgroup label Reference.


Browser support

Here is when label support started for each browser:

Chrome
23.0 Nov 2012
Firefox
31.0 Jul 2014
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.0 Jul 2012

You may also like



Guides