HTML `<track>` Tag

The <track> tag is one of the HTML5 elements. It defines subtitles, captions, descriptions, chapters, or metadata for either a <audio> or <video> media element.

The kind attribute defines the type of text track. The element points to a source file containing timed text that the browser displays when the user requests additional information. For subtitles and captions, this source must be a WebVTT (.vtt) file.

A media element cannot have more than one track having the same label, srclang, and kind.

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

html

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

Example of the HTML `<track>` tag:

HTML <track> Tag

html

<!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="https://www.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="https://www.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Attributes

Attribute	Value	Description
`default`	`default`	Specifies that the track should be enabled unless the user's preferences indicate that another track is more appropriate. Only one track per media element can have this attribute.
`kind`	`captions<br>chapters<br>descriptions<br>metadata<br>subtitles`	Defines the kind of text track.
`label`	`text`	Specifies a user-readable title of the text track.
`src`	`URL`	Sets the path to the track file.
`srclang`	`language_code`	Sets the language of the track text data (must be defined if `kind` = `"subtitles"`).

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

Practice

What is the functionality of the HTML <track> tag?

It is used within an <audio> tag to specify an audio track.It provides text tracks for media elements (<video> and <audio>).It is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.It is used to add a CSS stylesheet to an HTML document.

HTML <track> Tag ​

Syntax ​

Example of the HTML <track> tag: ​

Attributes ​

Practice ​

HTML `<track>` Tag

Syntax

Example of the HTML `<track>` tag:

Attributes

Practice