HTML track allows you to add subtitles, captions, descriptions, and other timed text information to audio and video content. It helps make multimedia accessible to more people, including viewers who are deaf or hard of hearing and users who prefer reading along with a video.
HTML provides the <track> element for connecting timed text files to the <video> and <audio> elements.
What Is the HTML Track Element?
The <track> element specifies a timed text resource for an audio or video element. It commonly uses WebVTT files, which have the .vtt extension.
Here is a basic example:
<video controls width="600">
<source src="lesson.mp4" type="video/mp4">
<track
src="captions.vtt"
kind="captions"
srclang="en"
label="English">
</video>In this example, the video uses lesson.mp4 as its media file and captions.vtt as its caption file.
Learn more about multimedia elements in our HTML Media tutorial.
Important Attributes of the Track Element
The <track> element supports several attributes that describe the text resource.
| Attribute | Purpose |
|---|---|
src | Specifies the path to the WebVTT file |
kind | Defines the type of timed text |
srclang | Specifies the language of the text track |
label | Provides a readable name for the track |
default | Marks a track as the preferred default track |
The kind attribute can use values such as subtitles, captions, descriptions, chapters, and metadata.
Creating a WebVTT Caption File
To display captions, you need a text file containing timed text. For example, create a file named captions.vtt with the following content:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to this HTML tutorial.
00:00:04.000 --> 00:00:07.000
Today, we are learning about the track element.The first line must be WEBVTT. Each caption cue contains a start time, an end time, and the text to display.
Save the file as captions.vtt and place it in the location specified by the src attribute.
Using Track with Multiple Languages
You can provide caption tracks in different languages so viewers can choose the one they understand.
<video controls width="600">
<source src="lesson.mp4" type="video/mp4">
<track
src="captions-en.vtt"
kind="captions"
srclang="en"
label="English"
default>
<track
src="captions-hi.vtt"
kind="subtitles"
srclang="hi"
label="Hindi">
</video>The default attribute marks English as the default track. Browser support and user settings determine how tracks are presented.
Difference Between Subtitles and Captions
Subtitles generally show spoken dialogue, often translating it into another language. Captions include dialogue and may also describe meaningful sounds, such as music or a door closing.
For example, a caption might display [door closes] when that sound is important to understanding the scene.
Explore our HTML Video tutorial to learn how to embed video content.
Best Practices for HTML Track
Follow these practices when using the <track> element:
- Use valid WebVTT files for timed text.
- Set the correct language using
srclang. - Give e