HTML `` Element: Adding Subtitles and Captions to Audio and Video

Learn how to enhance the accessibility of your audio and video content using the HTML `` element. This tutorial explains how to add text tracks (subtitles, captions, chapters) to improve user experience and make your media more inclusive for a wider audience.

Using the HTML <track> Element for Media Tracks

What is the <track> Element?

The HTML <track> element is used to add text tracks to <audio> or <video> elements. These tracks provide additional information like subtitles, captions, or chapters. This significantly improves accessibility for users with hearing impairments or those who prefer to read along with the audio or video.

Example:

HTML

<video src="myVideo.mp4" controls>
  <track kind="subtitles" srclang="en" src="en.vtt" label="English">
  <track kind="subtitles" srclang="es" src="es.vtt" label="Español">
</video>

    

This embeds a video and adds subtitle tracks for English and Spanish. The .vtt files contain the subtitle data in WebVTT format.

<track> Attributes

The <track> element uses several key attributes:

Attribute	Value	Description
`kind`	`subtitles`, `captions`, `chapters`, `descriptions`, `metadata`	Specifies the type of track.
`label`	text	Provides a human-readable label for the track (e.g., "English").
`src`	URL	The URL of the WebVTT file containing the track data (required).
`srclang`	language_code	Specifies the language of the track (required if `kind="subtitles"`).
`default`	`default`	Indicates that this track should be enabled by default if the browser doesn't have other preferences.

Browser Support

Support for the <track> element is good in modern browsers. Here's a compatibility table:

Browser	Version
Chrome	23.0
Firefox	10.0
Internet Explorer	11
Safari	6.0
Edge	12.1