What is track tag in html

HtmlConceptBeginner · 3 min read

HTML Track Tag: What It Is and How to Use It

The <track> tag in HTML is used to add timed text tracks like subtitles, captions, or descriptions to media elements such as <video> or <audio>. It helps improve accessibility and user experience by providing additional text information synchronized with the media.

⚙️

How It Works

The <track> tag works like a subtitle or caption sheet that you add to a video or audio player. Imagine watching a foreign movie and needing subtitles to understand the dialogue; the <track> tag provides that text in sync with the video.

It does not display anything by itself but connects to a separate text file (usually in WebVTT format) that contains the timed text. The browser reads this file and shows the text at the right moments during playback.

This tag must be placed inside a <video> or <audio> element and can support multiple tracks for different languages or types of text like captions or descriptions.

💻

Example

This example shows a video with English subtitles added using the <track> tag. The subtitles appear when you play the video and can be turned on or off.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video with Subtitles</title>
</head>
<body>
  <video controls width="400">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <track kind="subtitles" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/subtitles_en.vtt" srclang="en" label="English" default>
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output

A video player with controls and English subtitles that can be toggled on/off during playback.

🎯

When to Use

Use the <track> tag whenever you want to add subtitles, captions, or descriptions to your audio or video content. This is especially important for accessibility, helping people who are deaf or hard of hearing.

It is also useful for providing translations in different languages or adding extra information like chapter titles or audio descriptions for visually impaired users.

For example, online courses, movies, tutorials, and podcasts often use <track> to improve understanding and reach a wider audience.

✅

Key Points

The <track> tag adds timed text tracks to media elements.
It requires an external text file in WebVTT format.
Supports subtitles, captions, descriptions, and chapters.
Improves accessibility and user experience.
Must be placed inside <video> or <audio> tags.

✅

Key Takeaways

The tag adds subtitles or captions to video and audio elements.

It links to a timed text file in WebVTT format for synchronized display.

Use it to improve accessibility and provide translations or descriptions.

The tag must be inside

Multiple tracks can be added for different languages or purposes.