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 data type is set in the kind attribute. The element points to the source code which contains a timed text displayed by the browser when the user requests some additional data.

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 closed (<track/>).

<[audio | video]>
  ...
   <track src="...">
  ...
</[audio | video]>

Example of the 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).mp4"/>
    </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. This is used on one track element per media element.
kind Defines the kind of text track.
captions Specifies the translation of dialogue and sound effects.
chapters Specifies chapter titles for better navigation.
descriptions Specifies a textual description of the video content.
metadata Specifies the content used by scripts (not visible for the user).
subtitles Specifies subtitles in a video.
label text Specifies a user-readable title of the text track.
src URL Sets the path of the track.
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.

Browser support

chrome firefox safari opera
18+ 31+ 6+ 15+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?