HTML Captions

by

HTML captions make audio and video content easier to understand by displaying text alongside spoken words and important sounds. They are especially helpful for people who are deaf or hard of hearing, viewers watching videos without sound, and users learning a new language.

HTML supports captions through the <track> element, which connects a timed text file to an audio or video player.

What Are HTML Captions?

HTML captions are text descriptions synchronized with media playback. They can include spoken dialogue, speaker identification, and meaningful sounds such as music or a door closing.

For example, captions for a tutorial video might display the instructor’s words as the video plays.

Here is a basic example:

<video controls width="600">
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="captions.vtt"
    kind="captions"
    srclang="en"
    label="English">
</video>

The track element connects the caption file to the video. The kind="captions" attribute identifies the text as captions, while srclang="en" specifies English.

Learn more about multimedia elements in our HTML Media tutorial.

Creating an HTML Caption File

Captions are commonly stored in a WebVTT file with the .vtt extension. This file contains timestamps and the text that should appear at specific moments.

Create a file named captions.vtt with the following content:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to this HTML tutorial.

00:00:04.000 --> 00:00:07.000
Today, we are learning about captions.

The file must begin with WEBVTT. Each caption cue includes a start time, an end time, and the text to display.

Save the file in the correct folder and ensure that its name matches the src attribute in your HTML code.

Using Captions with HTML Video

You can add captions to a video by placing the <track> element inside the <video> element.

<video controls width="600">
  <source src="lesson.mp4" type="video/mp4">

  <track
    src="english-captions.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default>
</video>

The default attribute marks this track as the preferred default track. Whether captions appear automatically depends on browser behavior and user settings.

For more information about video playback, explore our HTML Video tutorial.

Adding Captions in Different Languages

You can provide multiple caption tracks so viewers can select their preferred language.

<video controls width="600">
  <source src="lesson.mp4" type="video/mp4">

  <track
    src="captions-en.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default>

  <track
    src="captions-hi.vtt"
    kind="captions"
    srclang="hi"
    label="Hindi">
</video>

Each track uses a separate WebVTT file. Make sure the text matches the selected language and stays synchronized with the video.

Difference Between Captions and Subtitles

Captions generally include spoken dialogue and meaningful non-speech sounds. Subtitles usually focus on dialogue and may translate it into another language.

For example:

  • Caption: [Music playing] Welcome to the lesson.
  • Subtitle: Welcome to the lesson.

The exact content depends on the media and the needs of its audience.

Best Practices for HTML Captions

Follow these practices when adding captions to your website:

  • Provide accurate text that matches the spoken content.
  • Synchronize captions with the audio and video.
  • Include meaningful sound effects when necessary.
  • Use clear punctuation and readable language.
  • Provide appropriate language labels for each track.
  • Test caption files in different browsers and devices.

Captions improve accessibility and help more people understand your multimedia content. You can also explore our tutorials on HTML Track and HTML Video Controls.