Article Categories

Selected Reading

Set the language of the track text data in HTML

HTML Web Development Front End Technology

The srclang attribute in HTML5 is used to specify the language of the track text data. This attribute is essential when working with <track> elements to provide subtitles, captions, descriptions, or other text tracks for multimedia content. The srclang attribute helps browsers and assistive technologies understand what language the track content is written in.

Syntax

Following is the syntax for the srclang attribute −

<track src="trackfile.vtt" kind="subtitles" srclang="language-code" label="Label">

The language-code should be a valid BCP 47 language tag, such as "en" for English, "es" for Spanish, or "fr" for French.

Parameters

The srclang attribute accepts the following values −

Language Code − A valid BCP 47 language tag that identifies the language of the track text data (e.g., "en", "es", "fr-CA").
Required Usage − This attribute is required when kind="subtitles" is specified.

Basic Example with Multiple Languages

Following example demonstrates how to use the srclang attribute with multiple subtitle tracks −

<!DOCTYPE html>
<html>
<head>
   <title>Video with Multiple Language Subtitles</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Sample Video with Subtitles</h2>
   <video width="400" height="300" controls>
      <source src="/html5/sample.mp4" type="video/mp4">
      <source src="/html5/sample.ogg" type="video/ogg">
      <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
      <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
      <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
      Your browser does not support the video element.
   </video>
   <p>This video includes subtitles in English, Spanish, and French. Users can select their preferred language from the video controls.</p>
</body>
</html>

In this example, three subtitle tracks are provided with different srclang values. The English track is set as default, and users can switch between languages using the video player's subtitle menu.

Using srclang with Different Track Kinds

The srclang attribute is particularly important for kind="subtitles", but it can also be used with other track kinds when language specification is relevant.

Example − Captions and Descriptions

<!DOCTYPE html>
<html>
<head>
   <title>Video with Captions and Descriptions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Accessible Video Content</h2>
   <video width="400" height="300" controls>
      <source src="/html5/demo.mp4" type="video/mp4">
      <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
      <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
      <track src="subtitles_de.vtt" kind="subtitles" srclang="de" label="Deutsche Untertitel">
      Your browser does not support the video element.
   </video>
   <p>This video provides captions for the hearing impaired, audio descriptions for the visually impaired, and German subtitles.</p>
</body>
</html>

Here, different track kinds are used with appropriate srclang values to provide comprehensive accessibility support.

Common Language Codes

Following table shows commonly used BCP 47 language codes for the srclang attribute −

Language	Code	Example Usage
English	en	srclang="en"
Spanish	es	srclang="es"
French	fr	srclang="fr"
German	de	srclang="de"
Italian	it	srclang="it"
Portuguese	pt	srclang="pt"
Chinese (Simplified)	zh-CN	srclang="zh-CN"
Japanese	ja	srclang="ja"

Complete Working Example

Following example shows a complete implementation with proper fallback content −

<!DOCTYPE html>
<html>
<head>
   <title>Multilingual Video Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5;">
   <div style="max-width: 600px; background: white; padding: 20px; border-radius: 8px;">
      <h2 style="color: #333;">Educational Video with Multiple Languages</h2>
      <video width="500" height="300" controls style="border: 2px solid #ddd; border-radius: 4px;">
         <source src="/html5/tutorial.mp4" type="video/mp4">
         <source src="/html5/tutorial.webm" type="video/webm">
         <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
         <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
         <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
         <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
         Your browser does not support the video element. Please upgrade to a modern browser.
      </video>
      <p style="color: #666; margin-top: 15px;">
         Available subtitles: English (default), Spanish, French<br>
         English captions available for accessibility
      </p>
   </div>
</body>
</html>

This comprehensive example includes multiple video formats, different subtitle languages, and accessibility features with proper styling for better user experience.

Key Points

The srclang attribute is required when using kind="subtitles".
Use valid BCP 47 language codes such as "en", "es-ES", or "zh-CN".
The default attribute can be used to specify which track loads automatically.
Multiple tracks with different srclang values allow users to choose their preferred language.
Screen readers and other assistive technologies use srclang to properly render text tracks.

Conclusion

The srclang attribute is essential for creating accessible and multilingual video content in HTML5. It enables proper language identification for subtitle tracks and helps browsers provide appropriate language selection options to users. Always use valid BCP 47 language codes and include this attribute when working with subtitle tracks.

Abhinanda Shri

Updated on: 2026-03-16T21:38:53+05:30

201 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next