HTML srclang Attribute

Introduction

The srclang attribute is an essential HTML feature associated with the <track> element. It specifies the language of a text track file—such as subtitles or captions—so browsers and media players can label tracks correctly and help users pick the language they understand.

Accurate language metadata improves accessibility for deaf and hard-of-hearing viewers (captions), non-native speakers (subtitles), and anyone using assistive technology. It is especially important for multilingual videos with several track files.

What You’ll Learn

Purpose of srclang

The primary purpose of the srclang attribute is to define the language of the track file linked by <track src>. When a video offers subtitles in English and Spanish, each <track> needs its own srclang value so the player can list “English” and “Spanish” accurately and match user language preferences where possible.

This attribute is particularly important for multimedia accessibility. Captions and subtitles are often stored as WebVTT (`.vtt`) files; srclang tells the browser what language those cues are written in, separate from the spoken audio language of the video.

📝 Syntax

Add srclang on <track> inside <video> or <audio>:

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track
    src="subtitles_en.vtt"
    kind="subtitles"
    srclang="en"
    label="English">
  <track
    src="subtitles_es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish">
</video>

Syntax Rules

• Valid only on <track> (child of video or audio).
• Required when kind is subtitles or captions.
• Value is a valid language tag (often ISO 639-1 two-letter code).
• BCP 47 tags like en-US or pt-BR are also valid.
• Always set label so users see a friendly name in the caption menu.
• Use default on one track to enable it initially when supported.

💎 Values

The srclang attribute accepts language codes. Common examples:

• srclang="en" — English.
• srclang="es" — Spanish.
• srclang="fr" — French.
• srclang="de" — German.
• srclang="ja" — Japanese.
• srclang="en-US" — English (United States) using BCP 47.

These codes help browsers and media players identify and display the correct language for track content. Use standard tags from BCP 47 for consistency.

<track src="captions_en.vtt" kind="captions" srclang="en" label="English CC">

<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">

Applicable Elements

srclang vs lang vs label

Examples Gallery

Multilingual subtitles, dynamic srclang updates, and accessible captions on <track>.

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>

<track id="dynamicTrack" src="subs.vtt" kind="subtitles" srclang="en" label="Track">

<script>
  document.getElementById("dynamicTrack").srclang = "fr";
</script>

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

♿ Accessibility

• Provide captions — Use kind="captions" with correct srclang for deaf and hard-of-hearing users.
• Accurate language tags — Match srclang to the language actually used in the VTT file.
• Clear labels — Write label text users understand (e.g. “English”, “Español”).
• Multiple languages — Offer tracks for each supported language rather than relying on auto-translation alone.
• Do not use captions alone for audio-only — Provide transcripts where video is not available.

💡 Best Practices