WebVTT 這個格式出現，目的是讓字幕檔上的額外訊息，可以讓 HTML5 的 TextTrack 元件直接，而且正確的顯示內容。
目前這項規範是 non-normative 未常規化的，將來極有可能變動。
下面的舉例都是在 Chrome v47 上作測試的結果。因此使用瀏覽器的平台（包括 Chromecast）行為都會類似。
其他平台（Andriod, iOS）作法不同，可能需要自行解析字幕內容。
基本格式
WEBVTT
1
00:01.000 --> 00:04.000
Never drink liquid nitrogen.
文件一開始的 WEBVTT 指出此檔案為 WebVTT 格式。
時間間格的上一行 1 代表 id。
00:01.000 --> 00:04.000 表示時間，必須遵守 hh:mm:ss.ttt 並在中間以 --> 表示間格的格式。
在下個時間標記或者 ID 出現前的內容，視為一個 cue。
多行字幕 (non-normative)
WEBVTT
00:01.000 --> 00:04.000
Do you love me?
Not exactly.
00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.
00:10.000 --> 00:14.000
The Organisation for Sample Public Service Announcements accepts no liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.
cue 內容間直接的斷行，會被分行顯示。
第二個 cue 前面加上 - 可運用在表示不同人說話的情況。
第三個長串對話，會在超出字幕容器大小時換行。
註解 (non-normative)
使用 NOTE 這個關鍵字，內容可以接在下一行，或是一個空格後面
WEBVTT
NOTE
This file was written by Jill. I hope
you enjoy reading it. Some things to
bear in mind:
NOTE I have warned you
00:01.000 --> 00:04.000
Never drink liquid nitrogen.
NOTE 會被 HTML5 TextTrack 給忽略，完全得不到相關訊息。
設定字幕版面
想像一個情況：現在播放的電影，本身就有打上一些文字，譬如片頭的演員名字，或是地點和故事背景時間的說明等。如果剛好這時候有需要上額外的字幕，就必須要調整動態字幕的位置。
WebVTT 支援在時間軸後方指定樣式。
WEBVTT
NOTE 示範如何設定版面
00:01.000 --> 00:04.000 size:60% line:3% align:left
Never drink liquid nitrogen.
必須注意 vertical 這個屬性，會影響到 position 和 line 的判斷方向。可用的屬性如下：
- vertical：設定為垂直字幕。值可以為
lr或rl，表示增行的方向。 - size：字幕的顯示範圍，以百分比表示。水平時代表容器的寬度，垂直則為高度。
- align：指定字幕的對齊方式，水平時可設定為
right或left。設為right的時候要注意 position 的設定。目前在垂直字幕的情況無作用。 - position：表示和字幕同方向的相對位置。
- line：表示和字幕垂直方向的位置。
測出來的 bug：
- 水平字幕情況，如果同時設定 line 及 size 的話，字幕會無法置中。
- 垂直情況 position 和 align 無作用。
因為未來瀏覽器對 WebVTT 的解譯應該會變，因此針對幾個情況，說明該怎麼設定：
-
一般情況：不需要額外設定，字幕置中並靠下。
-
字幕靠上，設定
line:3%
-
垂直字幕並靠左
vertical:lr line:3%
-
垂直字幕並靠右
vertical:rl line:97%
使用 HTML tag
支援 <b>、<i>和 <u> 等，全部的支援列表請見此處。
WEBVTT
00:01.000 --> 00:04.000
<v>Never drink <b>liquid nitrogen</b>.
如果 tag <> 沒有用 </> 包起來，則會 apply 到整行。
要注意如果 < 或 > 出現在字幕內容，會導致 parse 錯誤。
指定 Class
WEBVTT
00:00.000 --> 00:05.000
<c.bite-me>I have bite-me as classname
必須使用 <c.class-name> 的 syntax，c 是 tag 名稱代表是個 class，. 的後方接 class 名稱。
接著可以透過 css 來設定樣式：
::cue(c.bite-me) {
// 指定給 bite-me 的樣式
}
多重字幕
如果需要做到同時顯示兩個語言字幕，可以使用 class 來達成，也就是：
WebVTT
00:00.000 --> 00:02.000
這是一株藍蘋果樹！
<c.sub-lang> It’s a blue apple tree!
在 CSS 中指定樣式：
::cue(sub-lang) {
// 指定副字幕的字體大小
}
小結
WebVTT 有兩個會用到的特點：
-
指定字幕在畫面上的位置 — 但這個規範在未來很有可能會變動，如果要使用，應盡量只用最基本的設定，避免不可預期的顯示發生。
-
對 cue 指定 class — 使用
<c>這個 tag 來設定 cue 的 class 應該是比較確定的規範，其他的平台如 Andriod 或 iOS 需要自己解析 WebVTT 的話，可以針對<c.class-name>這個 syntax 來處理。
補充：指出說話者 (non-normative)
這個功能跟 <v> voice tag 配合，用到的機會不大，但在這裡紀錄起來。
WEBVTT
00:00.000 --> 00:02.000
<v Esme>It’s a blue apple tree!
00:02.000 --> 00:04.000
<v Mary>No way!
使用 <v 說話者名> 這個 syntax 可以表示這段字幕是由誰說的。然後可用下列方式來指定樣式：
/* 對 Esme 說話的字幕下樣式 */
::cue(v[voice="Esme"]) {
color: cyan;
}