htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “presentation.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “tutorial.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “documentary.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “song.mp3”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

track {
  display: none;
}

Related Tags