HTML Tags
HTML <track> Tag
The
<track>tag is used to add text tracks (like subtitles, captions, descriptions, or chapters) to<video>and<audio>elements.
It improves accessibility by providing text alternatives for users who are deaf, hard of hearing, or non-native speakers.
Syntax
html
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">Attributes
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the URL of the track file (usually a .vtt file). | src="captions.vtt" |
| kind | Defines the type of text track: subtitles, captions, descriptions, chapters, metadata. | kind="subtitles" |
| srclang | Specifies the language of the track text (ISO language code). | srclang="en" |
| label | Provides a title for the track (shown to users). | label="English Subtitles" |
| default | Marks the track as the default one when multiple tracks are available. | default |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Track Tag Example</title>
</head>
<body>
<h2>Example: Adding Subtitles to a Video</h2>
<video width="640" height="360" controls crossorigin="anonymous">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<track src="https://ik.imagekit.io/html5andcss3/lesson-samples/hindi_subtitles.vtt" kind="subtitles" srclang="hi" label="Hindi" default>
<track src="https://ik.imagekit.io/html5andcss3/lesson-samples/spanish_subtitles.vtt" kind="subtitles" srclang="es" label="Español">
Your browser does not support the video tag.
</video>
</body>
</html>Output
Browser Output
html
Displays a video with a subtitles or captions option that can be toggled using the video player’s menu.
Use our Try It Editor to see how subtitle files appear while the video plays.Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Partially |
The <track> element is supported in all modern browsers (from IE10+ for full functionality).
Older browsers may ignore subtitle tracks or not display them in the video controls.
To switch between the subtitles click on three vertical dots at bottom right of the video and then click on CC (captions) and choose the desired subtitle.
Notes
- The text file used in
srcmust be in WebVTT (.vtt) format. - The
kindattribute determines the purpose of the track (e.g., subtitles for translation, captions for hearing-impaired users). - You can include multiple
<track>tags for different languages or purposes. - The
<track>element is empty, meaning it doesn’t have a closing tag.
Conclusion
The <track> tag enhances accessibility and internationalization in multimedia content.
By including properly formatted caption or subtitle files, you make your videos more inclusive and user-friendly for a global audience.