Tag <track> In HTML
This article aims to talk about Tag Track in HTML wih examples. Wishing, it will satisfy the requirements for education.
The <track> tag in HTML is used to specify subtitles or captions for media elements, such as <video> and <audio> tags. It is a self-closing tag that is placed inside the media element, and it has several attributes that can be used to customize the display of the subtitles or captions.
Here is an example of how to use the <track> element to add subtitles to a video:
Example:
Here is an example of how to use the <track> element to add captions to an audio file:
Example:
Tag Track Uses
The Tag track <track> includes labels for <audio> or <video> tags.
A subtitle file, caption file, or other text file will be displayed when audio or video is played if this tag is included.
The tracks are presented in WebVTT files (.vtt).
Here are some common uses of the <track> tag:
- The <track> tag is used to add subtitles to videos, making the content more accessible to viewers who are deaf or hard of hearing. Subtitles can be added in different languages to reach a wider audience.
- The <track> tag can also be used to add closed captions to videos, which can be turned on or off by viewers. Closed captions are useful for viewers who want to watch videos in noisy environments or who do not want to disturb others around them.
- The <track> tag provides several attributes that can be used to customize the display of subtitles, such as the font size, color, and background color. This allows web developers to ensure that the subtitles are legible and match the design of the web page.
- The <track> tag supports multiple languages, making it easy to provide subtitles or captions in different languages for viewers who speak different languages.
Attributes
Global
In HTML, the Tag <track> is compatible with the Global Attributes.
Event
The Tag track <track> is compatible with the Event Attributes in HTML .
Additional Attributes
| Attribute | Value | Overview |
|---|---|---|
| default | default | This indicates that the track would also be activated when the user’s options fail to demonstrate that another option would be more suitable |
| kind | captions chapters descriptions metadata subtitles | Describe the kind of text track |
| label | text | Indicates the title of the text track |
| src | URL | It is necessary. Provides the track file’s URL |
| srclang | language_code | Indicate the language of the track text data (required if the kind is subtitles). |
Track Tag CSS
<track> is not a visible element, so CSS cannot be applied to it. In media elements such as subtitles, captions, and chapters, the track element provides a text track. Screen readers and user agents can display the text, but it cannot be seen on the screen.
Browser Compatibility
According to the table, the first browser version that fully accepts <track> is displayed.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <track> | 23.0 | 10.0 | 31.0 | 6.0 | 12.1 |
Tag Track Advantages
The <track> tag in HTML provides several advantages for web developers who want to add subtitles or captions to media elements:
- The <track> tag makes media content more accessible to viewers who are deaf or hard of hearing by providing a standardized way to add subtitles and captions to media elements. This allows viewers to better understand the content and follow along with the video or audio.
- The <track> tag provides several attributes that can be used to customize the display of subtitles or captions, such as font size, color, and background color. This allows web developers to ensure that the subtitles are legible and match the design of the web page.
- The <track> tag supports multiple languages, making it easy to provide subtitles or captions in different languages for viewers who speak different languages. This helps to make the content more accessible and usable for a wider audience.
- The <track> tag provides a standardized way to add subtitles or captions to media elements, which helps to ensure that the content can be accessed by a wider range of devices and platforms.
- The <track> tag is supported by all modern web browsers, ensuring that the content is accessible to a wide range of users.
