HTML label Attribute

Introduction

The label attribute is used on the <track> element to provide a user-readable title for a text track. When someone opens the captions or subtitles menu in a video player, they see each track’s label—for example, “English Captions” or “Español”. Text tracks work with <video> and <audio> to show synchronized captions, subtitles, descriptions, and chapter markers.

What You’ll Learn

Purpose of label

The primary purpose of the label attribute is to give each text track a clear, human-readable name in the media player UI. Without meaningful labels, users cannot tell which track is English captions, which is Spanish subtitles, or which is an audio description.

The label works together with kind (track type), srclang (language code), and src (WebVTT file). While srclang tells machines the language, label is what people actually read when choosing a track.

📝 Syntax

Add label on a <track> element inside <video> or <audio>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    src="captions_en.vtt"
    kind="captions"
    srclang="en"
    label="English Captions"
    default>
</video>

Syntax Rules

• Valid only on <track> elements inside <video> or <audio>.
• Value is a plain text string—no HTML tags inside the attribute.
• For subtitles, captions, and descriptions tracks, provide a non-empty label so users can select the track.
• Make each label unique when multiple tracks share the same language or kind.
• Pair with kind, src, and srclang for a complete text track.
• Write labels in the language users expect (e.g. “Español” rather than “es”).

💎 Values

The label attribute accepts any user-readable text string. Common patterns include:

• label="English Captions" — Language plus track type for clarity.
• label="Español" — Language name when the kind is obvious from context.
• label="English CC" — Short form for closed captions.
• label="Audio description" — Describes a kind="descriptions" track.
• label="Chapters" — Navigation markers for long videos.

In JavaScript, read or set the property on the track element:

document.querySelector("track").label = "Updated Track Label";

Applicable Elements

label vs srclang

Examples Gallery

A single captions track, multiple labeled language options, and updating label with JavaScript.

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

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="movie-en.vtt" srclang="en" label="English Captions" default>
  <track kind="subtitles" src="movie-es.vtt" srclang="es" label="Español">
  <track kind="subtitles" src="movie-fr.vtt" srclang="fr" label="Français">
</video>

<video controls>
  <source src="clip.mp4" type="video/mp4">
  <track id="dynamicTrack" kind="captions" src="clip.vtt" srclang="en" label="English">
</video>

<script>
  var trackElement = document.getElementById("dynamicTrack");
  trackElement.label = "Updated Track Label";
</script>

♿ Accessibility

• Write descriptive labels — “English Captions” is clearer than “Track 1” or “en”.
• Distinguish track types — When offering both captions and subtitles, include the type in the label (e.g. “English CC” vs “English Subtitles”).
• Use the user’s language in the label — Show “Français” for French tracks, not only the ISO code.
• Keep labels unique — Duplicate labels confuse users choosing between similar tracks.
• Do not skip labels on user-facing tracks — Captions, subtitles, and descriptions need non-empty labels.
• Form labels are separate — Use the <label for="id"> element for inputs; that is unrelated to the track label attribute.

💡 Best Practices