CSS Portal

HTML srclang Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The srclang attribute is an essential component of the <track> element in HTML, specifically designed to enhance media elements like <video> and <audio> with timed text tracks, such as subtitles, captions, descriptions, or chapters. This attribute specifies the language of the track text data, making it pivotal for accessibility, internationalization, and providing a more inclusive multimedia experience for users with diverse linguistic backgrounds.

The value of the srclang attribute must be a valid BCP 47 language tag that represents the language of the track. For example, en for English, es for Spanish, or fr for French. This allows user agents, such as web browsers, to select the appropriate text track according to the user's preferences or system settings, thereby facilitating a more personalized and accessible content consumption experience.

The srclang attribute works in tandem with the kind attribute (which indicates the kind of text track, such as subtitles or captions) and the label attribute (which provides a readable title for the track). Together, these attributes enable content creators to offer multiple text tracks in different languages or for different purposes, significantly enhancing the user's multimedia experience on the web.

Syntax

<track src="URL" srclang="language-code">

Values

  • language-codeTwo letter Language Code, e.g. en, ko, nl, es, etc.

Applies To

Example

<video width="320" height="240" controls>
<source src="images/earth.mp4" type="video/mp4">

<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Browser Support

The following information will show you the current browser support for the HTML srclang attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.

This attribute is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 29th March 2024

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!