Subtitle formats

WebVTT (.vtt) file format

Last updated: 2026-06-11

A WebVTT file is a plain UTF-8 text file, extension .vtt, whose first line is always the literal word WEBVTT. After the header come cues, each with a timecode line in the format HH:MM:SS.mmm --> HH:MM:SS.mmm — note the dot before the milliseconds, the opposite of SRT’s comma. Cues can carry an optional identifier, positioning settings, and CSS styling.

WebVTT (Web Video Text Tracks) is the W3C standard for the HTML5 <track> element, so browsers read it natively. It is the format streaming players and the web rely on when captions need positioning, color, or styling that SRT cannot express.

A complete WebVTT example

The file opens with WEBVTT, then a NOTE comment, then two cues. The second cue has an identifier ("intro") and cue settings pinning it to the top center.

WEBVTT

NOTE This file was exported for the web.

00:00:01.000 --> 00:00:04.000
The first line of dialogue.

intro
00:00:04.500 --> 00:00:07.200 line:0 position:50% align:center
A positioned caption at the top.

The WEBVTT header

Every valid WebVTT file starts with the six characters WEBVTT on the first line. A space and a free-text title may follow on the same line. A blank line then separates the header from the first cue or block. If the header is missing or misspelled, browsers reject the entire track — this is the most common reason a renamed SRT file fails to load as VTT. Renaming is not enough; the comma timecodes and the absent header both have to change.

Timecodes and the dot

WebVTT timecodes use a dot before three-digit milliseconds: 00:01:14.500. The hours field is optional under one hour, so 01:14.500 is also valid. Minutes, seconds, and milliseconds are required. The start and end are joined by --> . For a side-by-side of the punctuation difference with SRT, see subtitle timecodes explained.

Format	Separator	Example
SRT	, (comma)	00:01:14,500
WebVTT	. (dot)	00:01:14.500

Cue settings and positioning

After the end timecode you can add space-separated cue settings that control where the caption appears. Common keys are line (vertical row), position (horizontal percentage), align (text alignment), size (box width), and vertical (for vertical scripts). For example, line:0 align:start pins a caption to the top-left. SRT has no equivalent, which is why positioned captions require WebVTT.

Comments, identifiers, and styling

A line starting with NOTE is a comment the player ignores. An optional identifier on the line before the timecode names a cue for scripting or CSS. A STYLE block holds CSS via the ::cue selector, and inline tags such as <c.loud>, <i>, and <v Speaker> mark classes, italics, and voices. This styling layer is the main reason WebVTT is preferred for web and streaming captions. See the full SRT vs VTT comparison for when each format wins.

Key facts

Extension: .vtt; MIME type text/vtt.
Required first line: WEBVTT.
Timecode: HH:MM:SS.mmm — dot, three-digit milliseconds; hours optional under 1h.
Encoding: UTF-8 (mandatory); BOM allowed and stripped.
Supports cue settings (line, position, align, size, vertical).
Supports NOTE comments, cue identifiers, and STYLE/CSS.
Native to the HTML5 <track> element.

Definitions

WEBVTT header: The required first line. The file is invalid without it; an optional title can follow on the same line.
Cue: One caption: an optional identifier line, a timecode line with settings, and one or more text lines.
Cue identifier: An optional name on the line before the timecode. Useful for CSS targeting and scripting.
Cue settings: Key:value pairs after the end time — line, position, align, size, vertical.
STYLE block: A block beginning with STYLE that holds CSS applied to cues, e.g. ::cue { color: yellow }.
NOTE: A comment line or block. Ignored by the player; never displayed on screen.

Related guides

FAQ

What is a WebVTT file?+

WebVTT (Web Video Text Tracks), extension .vtt, is the W3C caption format for HTML5 video. Every file begins with the line WEBVTT. Cues use dot-millisecond timecodes (HH:MM:SS.mmm), can carry positioning settings, and can be styled with CSS.

What timecode format does WebVTT use?+

WebVTT uses HH:MM:SS.mmm with a dot (period) before the three-digit milliseconds: 00:01:14.500. The hours field is optional for times under one hour, so 01:14.500 is valid. Start and end are joined by ' --> '.

How is WebVTT different from SRT?+

WebVTT requires the WEBVTT header line, uses a dot in timecodes (SRT uses a comma), supports cue settings for position and alignment, allows named cues and a NOTE keyword for comments, and can be styled with a STYLE block or CSS. SRT stores only timing and text.

Do browsers play WebVTT natively?+

Yes. WebVTT is the standard text-track format for the HTML5 <track> element, so Chrome, Firefox, Safari, and Edge all read it without plugins. SRT is not natively supported by the <track> element and usually needs conversion first.

What are cue settings in WebVTT?+

Cue settings are space-separated key:value pairs after the end timecode that control on-screen placement — for example 'line:0 position:50% align:center'. They let you put a caption at the top, left, or center, which SRT cannot do.

Can WebVTT files have comments and styling?+

Yes. A line starting with NOTE is a comment ignored by players. A STYLE block lets you attach CSS to cues, and inline tags like <c.classname> apply classes. This styling layer is the main reason streaming platforms prefer WebVTT.

What encoding does WebVTT require?+

WebVTT files must be encoded as UTF-8. An optional byte-order mark is allowed and stripped by the parser, but UTF-8 is mandatory — other encodings are not valid WebVTT.