Have you ever turned on subtitles while watching a video? Those timed text captions that appear on screen are powered by something called a track element. HTML gives you the <track> element to add subtitles, captions, descriptions, chapters, and metadata to your video and audio content.
Basic Track Usage
The <track> element goes inside a <video> or <audio> tag. It points to a text file — usually in WebVTT format — that contains the timed text. The kind attribute tells the browser what type of text it is.
<video controls width="600">
<source src="lecture.mp4" type="video/mp4">
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles-fr.vtt" kind="subtitles" srclang="fr" label="French">
</video>
Track Kinds: Subtitles, Captions, and More
The kind attribute has several values. subtitles are translations for viewers who do not speak the language. captions include sound effects and are designed for deaf or hard-of-hearing viewers. descriptions describe the visual content for blind users. chapters help viewers navigate the video structure.
<track src="subs.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="caps.vtt" kind="captions" srclang="en" label="English Captions">
<track src="desc.vtt" kind="descriptions" srclang="en" label="Audio Description">
<track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
The Default Attribute
Add the default attribute to one track to make it active automatically when the video loads. Without a default track, users have to manually select a track from the video player controls.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subs.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>
WebVTT File Format
Track files use the WebVTT format — a simple text file with timestamps. Each cue has a start time, end time, and the text to display. It is a straightforward format that is easy to create and edit.
<!-- Example subtitle.vtt file -->
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to this HTML tutorial.
00:00:05.000 --> 00:00:08.000
Today we will learn about track elements.