← Back to All Tags

<track>

Defines text tracks for media elements

✨ HTML5

Definition and Usage

The <track> element specifies text tracks for <video> and <audio> elements.

This element is used to specify subtitles, caption files, or other files containing text, that should be visible when the media is playing.

Tracks are formatted in WebVTT format (.vtt files).

Tip: The <track> tag is a void element (self-closing) and does not require a closing tag.
Note: The <track> element is new in HTML5 and greatly improves media accessibility.
Important: You can include multiple track elements for different languages or different types of text tracks.

Browser Support

The numbers in the table specify the first browser version that fully supports the element:

Chrome
Chrome
23.0+
Firefox
Firefox
31.0+
Safari
Safari
6.0+
Edge
Edge
10.0+
Opera
Opera
12.1+

Attributes

Attribute Value Description
src URL Required. Specifies the URL of the track file
kind subtitles
captions
descriptions
chapters
metadata		 Specifies the kind of text track. Default is "subtitles"
srclang language_code Specifies the language of the track text data (required if kind="subtitles")
label text Specifies the title of the text track (visible to the user)
default default Specifies that the track is to be enabled if the user's preferences do not indicate another track is more appropriate

The <track> tag also supports the Global Attributes in HTML.

Examples

Video with Subtitles

Add subtitle tracks to a video:

Example

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video tag.
</video>

Multiple Language Tracks

Provide subtitles in multiple languages:

Example

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
  <track src="subtitles_de.vtt" kind="subtitles" srclang="de" label="Deutsch">
</video>

Captions for Accessibility

Use captions for deaf or hard-of-hearing users:

Example

<video controls width="640" height="360">
  <source src="presentation.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default>
</video>

Chapter Navigation

Add chapter markers for video navigation:

Example

<video controls width="640" height="360">
  <source src="tutorial.mp4" type="video/mp4">
  <track src="chapters_en.vtt" kind="chapters" srclang="en" label="Chapters">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

Audio Descriptions

Provide descriptions for visually impaired users:

Example

<video controls width="640" height="360">
  <source src="documentary.mp4" type="video/mp4">
  <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

WebVTT File Example

Example of a WebVTT subtitle file (subtitles_en.vtt):

Example

WEBVTT

00:00:00.000 --> 00:00:05.000
Welcome to our HTML5 video tutorial.

00:00:05.500 --> 00:00:10.000
In this video, we'll learn about the track element.

00:00:10.500 --> 00:00:15.000
The track element allows you to add subtitles,
captions, and descriptions to your videos.

00:00:15.500 --> 00:00:20.000
This greatly improves accessibility for all users.

Audio with Track

Use track element with audio for lyrics or metadata:

Example

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <track src="lyrics_en.vtt" kind="subtitles" srclang="en" label="Lyrics" default>
  <track src="metadata.vtt" kind="metadata" srclang="en" label="Song Info">
  Your browser does not support the audio element.
</audio>

Track Kinds Explained

The kind attribute specifies the type of text track:

  • subtitles: Translation of dialogue and sound effects (for users who don't understand the audio language)
  • captions: Transcription of dialogue, sound effects, and relevant audio information (for deaf or hard-of-hearing users)
  • descriptions: Text descriptions of the visual content (for blind or visually impaired users)
  • chapters: Chapter titles for media navigation
  • metadata: Content not intended for display (used by scripts)
Key Difference: Subtitles assume you can hear but don't understand the language. Captions assume you cannot hear.

WebVTT Format

WebVTT (Web Video Text Tracks) is the standard format for track files:

  • Files must start with "WEBVTT" on the first line
  • Use timestamp format: HH:MM:SS.mmm (hours:minutes:seconds.milliseconds)
  • Timestamps are separated by " --> " (space, arrow, space)
  • Text content comes after the timestamp line
  • Empty lines separate different cues
  • Supports styling with CSS-like syntax
  • Can include cue identifiers and settings
File Extension: WebVTT files must use the .vtt extension and be served with MIME type "text/vtt"

Accessibility Benefits

The <track> element significantly improves media accessibility:

  • Deaf/Hard of Hearing: Captions provide access to audio content
  • Blind/Visually Impaired: Audio descriptions explain visual content
  • Language Learners: Subtitles help understand foreign language content
  • Noisy Environments: Subtitles allow viewing without sound
  • Search Engines: Text tracks improve SEO and content indexing
  • Legal Compliance: Meets accessibility requirements (WCAG, ADA, Section 508)
  • Better UX: Improves comprehension and retention for all users

Best Practices

  • Provide Multiple Languages: Offer tracks in different languages for international audiences
  • Use Appropriate Kind: Choose the correct track type (subtitles vs captions vs descriptions)
  • Set Default Track: Use the default attribute for the primary language
  • Accurate Timing: Ensure cues sync perfectly with audio/video
  • Clear Labels: Use descriptive labels that users can understand
  • Include Sound Effects: In captions, describe important non-dialogue sounds [music], [door slam]
  • Test Thoroughly: Verify tracks work across different browsers and devices
  • File Organization: Keep track files organized with clear naming conventions
  • Accessibility First: Always include at least captions for video content
  • CORS Headers: Ensure track files are served with proper CORS headers if from different domain

Try it Yourself

Interactive Example

The <track> element enables accessible video playback with subtitles, captions, and descriptions.

Track Element Structure:

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

Tip: Always provide captions for video content to ensure accessibility compliance and improve user experience.

Default CSS Settings

The <track> element is not rendered directly. It provides data to the video/audio player:

Default CSS

track {
  display: none;
}

Related Tags