CodeBlanks Logo Icon CodeBlanks
Login Register

Track and captions

HTML course · Advanced · Lesson 15/56

Add captions and chapters with <track>.

The track element and kind

The <track> element adds text tracks to a video: captions, chapter markers or spoken descriptions. Each track links to a WebVTT file (with src) and the kind attribute sets the track type.

kind="captions" provides captions for deaf and hard-of-hearing viewers, including sound effects alongside the dialogue. kind="subtitles" is for translation.

The track element goes inside the video, after the source elements.

srclang and label

Each <track> element takes two more attributes: srclang gives the caption's language code (e.g. en, tr); label sets the human-readable name shown in the player menu (e.g. English, Turkish).

Without these two attributes, screen readers and player menus cannot pick the right track. Always give a non-empty value.

Exercise Add two captions tracks

Take the video from the previous lesson. Inside the video, after the source elements, add two <track> elements. First: kind="captions" src="/captions/black-sea-en.vtt" srclang="en" label="English". Second: kind="captions" src="/captions/black-sea-tr.vtt" srclang="tr" label="Turkish".

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nature Doc: Black Sea</title>
  </head>
  <body>
    <video controls>
      <source src="/videos/black-sea.mp4" type="video/mp4">
      <source src="/videos/black-sea.webm" type="video/webm">
      <track kind="captions" src="/captions/black-sea-en.vtt" srclang="en" label="English">
      <track kind="captions" src="/captions/black-sea-tr.vtt" srclang="tr" label="Turkish">
    </video>
  </body>
</html>

Test yourself

  1. Which kind value is used for deaf and hard-of-hearing viewers?

    • captions
    • subtitles
    • chapters
    • descriptions
    Show answer

    captions — Correct! kind="captions" provides captions for deaf viewers, including sound effects.

  2. Write the language code for the Turkish captions

    <track kind="captions" src="/captions/black-sea-tr.vtt" srclang="____" label="Turkish">
    Show answer 
    <track kind="captions" src="/captions/black-sea-tr.vtt" srclang="tr" label="Turkish">

  3. Match the kind value to its purpose.

    captions
    captions for deaf viewers
    subtitles
    translation subtitles
    chapters
    chapter markers
    descriptions
    audio description for blind

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone