.VTT File Format – Cue text

WebVTT subtitles

The text of a subtitle or caption cue may hold a small set of tags, written like HTML. Line breaks in the text are kept. Chapter cues hold plain text only, and metadata cues any text at all.

Tags

TagAnnotationMeaningCSS selector
<c>…</c>noneA span that only carries classesc
<i>…</i>noneItalicsi
<b>…</b>noneBoldb
<u>…</u>noneUnderlineu
<v Name>…</v>required: the speakerA voice. The end tag may be left out when the voice covers the whole cue.v, v[voice="Name"]
<lang en-GB>…</lang>required: a BCP 47 language tagThe language of the text insidelang, [lang="en-GB"], :lang()
<ruby>…<rt>…</rt></ruby>noneRuby: base text, each part followed by its annotation in rt. The last </rt> may be left out; </ruby> may not.ruby, rt
<00:00:05.000>—A timestamp inside the text, for karaoke-style reveal. Each must be later than the one before, after the cue’s start and before its end.:past, :future

Any other tag is ignored, though its text is kept. Tag names are lower case.

Classes and annotations

Any tag except a timestamp can carry classes, each after a full stop: <c.yellow.bg_blue>, <v.loud Ben>. A class name may not contain a space, tab, line break, &, <, > or .. The annotation follows a space or tab after the tag name and classes, and may not contain a line break, & or >.

Default classEffect
white, lime, cyan, red, yellow, magenta, blue, blackText colour. lime is what captioners call green.
bg_white, bg_lime, bg_cyan, bg_red, bg_yellow, bg_magenta, bg_blue, bg_blackBackground colour.

When two classes conflict, the later one wins. Blue or black text should not be used on the default dark background.

Characters

Plain text may not contain a bare < or &. Write them with HTML character references: &lt;, &amp;, &gt;, and any other HTML named or numeric reference, such as &nbsp;, &lrm;, &rlm; or &#x266A; (♪). An & that does not start a reference is kept as it is. The text may not contain -->.

Worked example

00:00:10.000 --> 00:00:14.000
<v.singer Mia><c.yellow>&#x266A;</c> Twinkle, <00:00:11.000>twinkle, <00:00:12.000>little <00:00:13.000>star

00:00:15.000 --> 00:00:17.000
<ruby>東京<rt>とうきょう</rt></ruby> <lang en>(Tokyo)</lang>
The first cue is sung by Mia, with a yellow note symbol and a timestamp before each word. CSS can only select tags, so to colour the words with :past and :future each would be wrapped in <c>. The second cue shows ruby reading text above a place name.