Captions & Subtitles (<track>)

The <track> element attaches timed text — captions, subtitles, descriptions, or chapter markers — to an <audio> or <video> element. It's what makes a video's dialogue readable without sound, translatable into another language, and searchable/navigable by chapter, all through plain markup.

Basic Usage

track-basic.html

HTML

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

default selects the initial track

The default attribute marks which track is enabled automatically when the video loads (without it, most browsers show no captions until the user turns them on manually).

The kind Attribute

kind	Purpose
`subtitles`	Translated dialogue text, assuming the viewer can hear the audio but not understand the language.
`captions`	Dialogue plus non-speech sound descriptions (e.g. "[door slams]"), for viewers who cannot hear the audio.
`descriptions`	Text describing important visual information, for blind/low-vision users — often read aloud by a screen reader or text-to-speech engine.
`chapters`	Chapter titles/timestamps used to build a navigable chapter menu in the player UI.
`metadata`	Data meant for scripts, not shown to the viewer at all.

track-kinds.html

HTML

<video controls width="640" height="360">
  <source src="documentary.mp4" type="video/mp4" />

  <track src="captions-en.vtt" kind="captions" srclang="en" label="English (captions)" default />
  <track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Español" />
  <track src="descriptions.vtt" kind="descriptions" srclang="en" label="Audio descriptions" />
  <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters" />
</video>

WebVTT Format Basics

<track> files use the WebVTT (.vtt) format — a plain-text format built specifically for timed captions. A minimal file has a required header, then a series of numbered cues with start/end timestamps.

lecture-en.vtt

Text

WEBVTT

1
00:00:00.000 --> 00:00:04.500
Welcome back to the course. Today we're covering the box model.

2
00:00:04.500 --> 00:00:09.000
Every element on the page is really just a rectangular box.

3
00:00:09.000 --> 00:00:13.250
That box has content, padding, a border, and a margin.

The file must start with the literal line WEBVTT — this is what distinguishes it from a plain .srt subtitle file.
Timestamps use the format hours:minutes:seconds.milliseconds, separated by an arrow (-->).
Cue numbers/identifiers are optional but make files easier to edit and debug.
Basic HTML-like tags (<b>, <i>, <u>, <c> for styling classes) are allowed inside cue text for simple emphasis.

Multiple Languages

You can attach as many <track> elements as you have translations — the browser's native controls UI lets the viewer switch between them (usually via a captions/subtitles menu button).

track-multi-language.html

HTML

<video controls width="640" height="360">
  <source src="talk.mp4" type="video/mp4" />

  <track src="captions-en.vtt" kind="captions" srclang="en" label="English" default />
  <track src="captions-fr.vtt" kind="captions" srclang="fr" label="Français" />
  <track src="captions-de.vtt" kind="captions" srclang="de" label="Deutsch" />
  <track src="captions-ja.vtt" kind="captions" srclang="ja" label="日本語" />
</video>

Accessibility Is Not Optional

Captions are a legal and ethical requirement, not a nice-to-have

Any video containing spoken dialogue should ship at least one kind="captions" track. Deaf and hard-of-hearing users depend on it entirely, and many jurisdictions (e.g. under the ADA or EN 301 549) legally require captioned video content for public-facing sites.

Captions also help anyone watching without sound — a huge share of social/mobile video views happen muted.
Text tracks are indexable, unlike audio — search engines and in-page search can surface a video by what is said inside it.
Auto-generated captions (from YouTube, Whisper, etc.) are a reasonable starting point but should be proofread — automated transcription still makes frequent errors, especially with names and jargon.

Styling Captions with CSS

The ::cue pseudo-element lets you restyle how captions render, within limits set by the browser.

cue-styling.css

CSS

video::cue {
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 1.1em;
}

Generate transcripts alongside captions

Once you have a WebVTT file, deriving a plain-text transcript for the page (for SEO and readers who prefer text) is mostly a find -and-replace away — strip the timestamps and cue numbers, keep the text.

Quick recap

Use kind="captions" for anything with dialogue, write cues in WebVTT format, mark one track default, and treat captions as a baseline accessibility requirement rather than an afterthought.