HTML <track> tag

The <track> tag is one of the HTML5 elements. It adds timed text tracks — subtitles, captions, descriptions, chapters, or metadata — to a <video> or <audio> media element. A track is the standard way to make media accessible: it lets viewers who are deaf or hard of hearing read what is being said, lets non-native speakers follow along, and lets browsers offer chapter navigation.

The <track> element is always a child of a <video> or <audio> element, placed after any <source> elements. It is empty and points (via src) to an external WebVTT (.vtt) file that holds the timed text. The browser shows that text automatically while the media plays.

A single media element can contain several <track> elements — for example one for each language — but it cannot have two tracks that share the same kind, srclang, and label.

Syntax

The <track> tag is empty, which means that the closing tag isn’t required. But in XHTML, the <track> tag must be self-closed (<track />).

HTML <track> Tag

<audio> or <video>
  ...
  <track src="...">
  ...
</audio> or </video>

Example of the HTML `<track>` tag:

HTML <track> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Attributes

Attribute	Value	Description
`default`	`default`	Marks the track as the one to enable by default, unless the user's preferences say another is more appropriate. Only one track per media element may have this attribute.
`kind`	`subtitles`, `captions`, `descriptions`, `chapters`, `metadata`	Defines the type of text track (see the table below). Defaults to `subtitles`.
`label`	`text`	A human-readable title for the track. This is the name shown to the user in the player's track-selection menu (e.g. "English", "Français").
`src`	`URL`	The path to the WebVTT (`.vtt`) file. Required.
`srclang`	`language_code`	The language of the track text as a BCP 47 tag (e.g. `en`, `fr`, `pt-BR`). Required when `kind="subtitles"`.

Values of the `kind` attribute

Value	Purpose
`subtitles`	Translation of the dialogue for viewers who can hear but may not understand the language. Requires `srclang`.
`captions`	A transcription of dialogue plus non-speech sounds (sound effects, music cues, who is speaking). Intended for deaf and hard-of-hearing viewers.
`descriptions`	Text descriptions of the video's visual content, meant to be read aloud (synthesized speech) for blind or low-vision users when the action isn't conveyed by the audio.
`chapters`	Chapter titles used for navigating the media.
`metadata`	Data for use by scripts. This track is not displayed to the user.

The <track> tag also supports the Global attributes and the Event Attributes.

What is a WebVTT file?

The text shown by a <track> lives in a separate file written in the WebVTT (Web Video Text Tracks) format, saved with a .vtt extension and served as text/vtt. Every WebVTT file begins with the line WEBVTT, followed by one or more cues. Each cue has a time range (start --> end, in hh:mm:ss.ttt) and the text to display during that range:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the demo video.

You can have many cues, optionally separated by blank lines, and each cue may carry an optional ID line above its timestamp. The browser matches the current playback time to a cue and renders its text over the media.

Multiple tracks example

A common setup is to offer captions in one language and subtitles in another. Give every track a clear label so users can pick the right one from the player menu, and mark a single track as default:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video
      controls
      width="320"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
    >
      <track
        default
        kind="captions"
        srclang="en"
        label="English"
        src="captions-en.vtt"
      />
      <track
        kind="subtitles"
        srclang="fr"
        label="Français"
        src="subtitles-fr.vtt"
      />
    </video>
  </body>
</html>

The player shows an "English" and a "Français" entry in its subtitle/caption menu; English captions appear by default because that track carries the default attribute.

Accessibility

The <track> element is the HTML mechanism for meeting key WCAG success criteria:

Captions (WCAG 1.2.2) — provide a <track kind="captions"> so deaf and hard-of-hearing users can perceive both dialogue and important sounds in pre-recorded media.
Audio Description (WCAG 1.2.3 / 1.2.5) — provide a <track kind="descriptions"> so blind and low-vision users get a description of important visual information.

Because the track text is timed text in a separate file, search engines and assistive technologies can also read it, which improves both accessibility and discoverability.

Practice

What does the HTML track element do?

It specifies an extra audio track inside an audio element.It adds timed text tracks (subtitles, captions, descriptions, chapters, or metadata) to video and audio media.It adds a CSS stylesheet to an HTML document.It embeds an external video file directly into the page.