Syntax
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">Examples
Basic Captions
Adding English captions to a video.
<video controls>
<source src="tutorial.mp4" type="video/mp4">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
</video>Multiple Language Subtitles
Offering subtitle tracks in more than one language.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subs-en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subs-fr.vtt" kind="subtitles" srclang="fr" label="Français">
</video>Chapter Markers
Using track for chapter navigation instead of captions.
<video controls>
<source src="lecture.mp4" type="video/mp4">
<track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
</video>Attributes
- src (URL): The URL of the WebVTT track file
- kind (subtitles | captions | chapters | descriptions): The type of timed text
- srclang (string): The language of the track content, as a language code
- label (string): A human-readable label shown in the track selection menu
- default (boolean): Marks this track as enabled by default
Best practices
- Always provide captions for video content with spoken dialogue — it is one of the most impactful accessibility improvements you can make
- Use kind="captions" (which includes non-speech sounds) rather than kind="subtitles" when the audience may be deaf or hard of hearing, not just non-native speakers
- Mark exactly one track as default per kind to avoid ambiguity
- Test that your WebVTT files are valid — malformed timing syntax will silently fail to display
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.