HTML <track> Tag

Q: What is the HTML track tag used for?

The track element adds timed text tracks such as subtitles, captions, or descriptions to audio or video elements using WebVTT files.

Q: What file format does track use?

Use WebVTT (.vtt) files referenced by the src attribute. Each file contains timed text cues synced to the media timeline.

Q: What is the difference between subtitles and captions?

Subtitles translate dialogue for viewers who can hear the audio. Captions include dialogue plus sound effects and speaker cues for deaf or hard-of-hearing viewers.

Q: Where does track go in HTML?

Place track elements as children of video or audio, alongside source elements.

Beginner

⏱️ 6 min read

📚 Updated: Jun 2026

🎯 3 Examples

HTML5 Media

HTML track tag tutorial — subtitles and captions for video

Overview

What You’ll Learn

The <track> tag adds subtitles, captions, and other timed text to <video> and <audio>. This guide covers syntax, WebVTT files, key attributes, accessibility, and best practices for beginners.

Track Syntax

Void element inside media tags.

WebVTT Files

Timed text in .vtt format.

kind Attribute

Subtitles, captions, chapters.

Language Tracks

srclang and label for menus.

Accessibility

Inclusive video for all viewers.

Best Practices

Clear labels and tested tracks.

Fundamentals

What Is the `<track>` Tag?

The track element (<track>) adds timed text tracks to <audio> and <video> elements. It provides supplementary text such as subtitles, captions, or descriptions to improve understanding and accessibility of multimedia content.

💡

Make media accessible to everyone

Captions help deaf and hard-of-hearing viewers. Subtitles reach global audiences. Both are added with a <track> element pointing to a WebVTT file.

The track element is a void element—it has no closing tag and no visible content of its own. Browsers read the referenced .vtt file and display timed text over the video or alongside audio controls.

Foundation

📝 Syntax

Place <track> inside <video> or <audio>, typically after <source> elements:

syntax.html

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>

Syntax Rules

<track> is a void element—no closing tag required.
Must be a direct child of <video> or <audio>.
The src attribute points to a WebVTT (.vtt) text track file.
Use kind, srclang, and label so browsers can list tracks in the caption menu.
Add default on one track to enable it when the media loads.

Cheat Sheet

⚡ Quick Reference

Attribute	Example	Purpose
`kind`	`subtitles`, `captions`	Type of text track
`src`	`/video/count.vtt`	WebVTT file URL
`srclang`	`en`, `es`	Track language (BCP 47)
`label`	`English`	User-visible menu name
`default`	Boolean	Enable this track by default
Parent	`video` or `audio`	Media element only

Reference

🎬 `kind` Attribute Values

kind Value	Purpose	Visible?
`subtitles`	Translation of dialogue for viewers who can hear audio	Yes
`captions`	Dialogue + sound effects for deaf/hard-of-hearing viewers	Yes
`descriptions`	Audio descriptions of visual content for blind viewers	Via screen reader
`chapters`	Chapter titles for navigation	In chapter menu
`metadata`	Data for scripts (not shown to users)	No

Comparison

⚖️ Subtitles vs Captions

Feature	Subtitles (`kind="subtitles"`)	Captions (`kind="captions"`)
Target audience	Viewers who can hear but need translation	Deaf or hard-of-hearing viewers
Content	Spoken dialogue translation	Dialogue + sound effects, music cues
Example use	Foreign-language film	Educational or presentation video

Format

📄 WebVTT File Format

Text tracks use the WebVTT (.vtt) format. Each cue has a start time, end time, and text:

count.vtt

WEBVTT

00:00:00.000 --> 00:00:04.600
Ten, nine, eight, seven, six,

00:00:05.280 --> 00:00:09.720
five, four, three, two, one.

Save files with the .vtt extension and serve them with MIME type text/vtt.

Reference

🧰 Attributes

These are the key attributes on <track>:

kind Required

Type of text track: subtitles, captions, descriptions, chapters, or metadata.

kind="subtitles"

src Required

URL of the WebVTT (.vtt) text track file.

src="/video/count.vtt"

srclang Recommended

Language of the track using a BCP 47 language tag (e.g. en, es).

srclang="en"

label Recommended

User-readable name shown in the browser’s caption/subtitle menu.

label="English"

default Optional

Boolean attribute. Enables this track by default when the media loads.

default

Attribute Examples

track-attributes.html

<!-- Subtitles -->
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">

<!-- Captions in Spanish -->
<track kind="captions" src="captions_es.vtt" srclang="es" label="Spanish">

Try subtitles example

Hands-On

Examples Gallery

Subtitles, captions, and multiple language tracks with copy-ready code, live previews, and hands-on practice.

👀 Live Preview

Video with an English subtitle track. Enable captions from the player menu:

Tip: Open the caption/subtitle menu in the video controls to toggle tracks.

📚 Common Use Cases

Use <track> to add subtitles for multilingual audiences, captions for accessibility, and chapter markers for long-form video navigation.

Adding Subtitles

When dealing with videos in multiple languages, the <track> tag is invaluable for including subtitles. This enhances accessibility and lets a broader audience engage with your multimedia:

adding-subtitles.html

<video controls>
  <source src="/video/count.mp4" type="video/mp4">
  <track kind="subtitles" src="/video/count.vtt" srclang="en" label="English" default>
</video>

Try It Yourself

Including Captions

For educational or presentation videos, using <track kind="captions"> can significantly improve comprehension for viewers with hearing impairments or those in noisy environments:

including-captions.html

<video controls>
  <source src="/video/count.mp4" type="video/mp4">
  <track kind="captions" src="/video/count_es.vtt" srclang="es" label="Spanish">
</video>

Try It Yourself

Multiple Language Tracks

Offer several <track> elements so viewers can switch between languages from the browser’s caption menu:

multiple-tracks.html

<video controls>
  <source src="/video/count.mp4" type="video/mp4">
  <track kind="subtitles" src="/video/count.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="/video/count_es.vtt" srclang="es" label="Spanish">
</video>

Try It Yourself

A11y

♿ Accessibility

Provide captions — Include at least one caption track for spoken video content.
Use descriptive labels — The label attribute should clearly name each language or track type.
Set a default track — Use the default attribute on the primary language track.
Sync accurately — WebVTT cue times must match the media timeline precisely.
Offer transcripts — Complement tracks with a full text transcript for long-form content.

🧠 How <track> Works

Author adds track markup

A <track> inside video points to a .vtt file with timed cues.

Markup

Browser loads the text track

The media element fetches the WebVTT file and parses cue start/end times.

Parsing

Timed text displays

As playback reaches each cue, the browser overlays subtitles or captions on the video.

Display

Accessible multimedia

Viewers read synced text alongside video—making content inclusive for global and deaf/hard-of-hearing audiences.

Compatibility

Browser Support

The <track> tag is supported in all modern browsers. Internet Explorer 10+ has partial support for some track features.

✓ Baseline · HTML5

Text tracks in modern browsers

Chrome, Firefox, Safari, Edge, and Opera fully support WebVTT subtitles and captions on video elements.

100% Modern browser support

Google Chrome Fully supported

Full support

Mozilla Firefox Fully supported

Full support

Apple Safari Fully supported

Full support

Microsoft Edge Fully supported

Full support

Internet Explorer IE 10+ partial

Partial support

Opera Fully supported

Full support

<track> tag 100% modern support

Bottom line: Ship WebVTT tracks with confidence in all browsers your users run today.

Wrap Up

Conclusion

The <track> tag is a valuable tool for making multimedia content more accessible and inclusive. By incorporating captions and subtitles with WebVTT files, you significantly improve the user experience for a diverse audience.

View Examples Gallery Try subtitles example

Pro Tips

💡 Best Practices

✅ Do

Use WebVTT (.vtt) files for all text tracks
Provide clear, descriptive label values for each track
Set default on the primary language track
Test captions in multiple browsers before publishing
Sync cue times accurately to the media timeline

❌ Don’t

Use non-WebVTT formats without a polyfill
Place <track> outside video or audio
Skip captions on videos with spoken content
Use vague labels like “Track 1”
Forget srclang on multilingual tracks

Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about `<track>`

Bookmark these before you publish your next video.

Core concepts

🎬 01

Text Tracks

<track> adds timed subtitles, captions, and descriptions to media.

Foundation

📄 02

WebVTT Format

Store timed cues in .vtt files referenced by src.

Essential

🌐 03

kind + srclang

Declare track type and language for the caption menu.

Attributes

♿ 04

Accessibility

Captions make video usable for deaf and hard-of-hearing viewers.

A11y

📱 05

Inside Media

Always nest track inside video or audio.

Placement

❓ Frequently Asked Questions

What is the HTML track tag used for?

The <track> element adds timed text tracks—subtitles, captions, descriptions, or chapters—to <video> or <audio> using WebVTT files.

What file format does track use?

WebVTT (.vtt) is the standard format. Each file contains timed text cues with start and end timestamps.

What is the difference between subtitles and captions?

Subtitles translate dialogue for viewers who can hear. Captions include dialogue plus sound effects and speaker cues for deaf or hard-of-hearing viewers.

Where does track go in HTML?

As a child of <video> or <audio>, alongside <source> elements.

What does the default attribute do?

The default boolean attribute marks one track as enabled when the media element loads. Only one track per media element should have default.

Is track supported in all browsers?

Yes in all modern browsers. Internet Explorer 10+ has partial support for some track features.

Add subtitles to your videos

Practice <track> with WebVTT files in the Try It editor.

Try subtitles example →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML tr Tag HTML tt Tag

HTML <track> Tag

What You’ll Learn

Track Syntax

WebVTT Files

kind Attribute

Language Tracks

Accessibility

Best Practices

What Is the <track> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

🎬 kind Attribute Values

⚖️ Subtitles vs Captions

📄 WebVTT File Format

🧰 Attributes

Attribute Examples

Examples Gallery

👀 Live Preview

📚 Common Use Cases

Adding Subtitles

Including Captions

Multiple Language Tracks

♿ Accessibility

🧠 How <track> Works

Author adds track markup

Browser loads the text track

Timed text displays

Accessible multimedia

Browser Support

Text tracks in modern browsers

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five truths every developer should know about <track>

Text Tracks

WebVTT Format

kind + srclang

Accessibility

Inside Media

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML tr Tag

HTML tt Tag

HTML audio Tag

Try multiple tracks

Add subtitles to your videos

About the author

What Is the `<track>` Tag?

🎬 `kind` Attribute Values

Five truths every developer should know about `<track>`