Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML track languages: label subtitles and captions honestly

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

Track elements attach timed text files to a media element and identify each track's kind and language.

Use it in a concrete workflow

A safety briefing has the original spoken English, English captions that include non-speech sound, and a translated Hindi subtitle file. Their labels tell viewers which track they are choosing. Provide one appropriate default rather than marking every track default. The files must actually contain synchronized cues; the HTML tag does not transcribe audio, translate dialogue, or audit caption quality.

html
<video controls preload="metadata" width="640" height="360">
  <source src="/media/safety-briefing-47.mp4" type="video/mp4">
  <track kind="captions" src="/media/safety-briefing-47.en.vtt" srclang="en" label="English captions" default>
  <track kind="subtitles" src="/media/safety-briefing-47.hi.vtt" srclang="hi" lang="hi" label="हिन्दी">
  <p>Video playback unavailable. Read the briefing transcript in the safety section.</p>
</video>

Behavior and ownership

The two local WebVTT paths need real, tested files. Captions and subtitles serve different needs; an inaccurately labeled translation can mislead users who expect descriptions of sound.

Performance and maintenance

Timed text files are usually small beside video, but synchronization and translation review take real editorial work. Test track selection, cue timing, and text contrast on supported browsers.

Common Mistakes

  • Do not mark multiple caption or subtitle tracks as default.
  • Do not label translated dialogue as sound-complete captions.
  • Do not publish a track pointing to a missing VTT file.

Connected lessons

html
media
Storage details