Table of contents

HTML <track> Tag: Definition, Syntax, and Examples

What is HTML <track> Tag?

The HTML track tag is used to add text tracks to media elements such as audio and video. It provides subtitles, captions, descriptions, and metadata for media files. The track tag helps improve accessibility for users, especially those who are deaf, hard of hearing, or watching videos without sound.

This tag is important because it makes multimedia content more user-friendly and SEO-friendly. Search engines can read text tracks, which helps in better indexing of media content. The track tag is placed inside the video or audio tag, and multiple track tags can be added for different languages or track types.

Syntax of the HTML <track> Tag

plaintext
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">
</video>

kind defines the type of track, src provides the subtitle file, srclang defines language, and label names the track shown to users.

Examples of HTML <track> Tag

Example 1: Basic HTML Track Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <video controls>
    <source src="intro.mp4" type="video/mp4">
    <track kind="subtitles" src="english.vtt" srclang="en" label="English Subtitles">
  </video>

</body>
</html>

In this example, a basic subtitle track is added to a video. Users can turn subtitles on or off from the video player settings.

Example 2: SEO Optimized Track Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <video controls>
    <source src="webdev-tutorial.mp4" type="video/mp4">
    <track kind="captions" src="english-captions.vtt" srclang="en" label="Web Development Tutorial Captions - Scholar247" default>
    <track kind="subtitles" src="spanish.vtt" srclang="es" label="Spanish Subtitles -  Scholar247">
    </video>

</body>
</html>

This example uses caption and subtitle tracks with SEO-friendly labels. Using descriptive labels like Web Development Tutorial Captions helps search engines understand video content, increasing visibility and improving user experience.

Attributes of the HTML <track> Tag

The main attributes of the track tag are:

• kind: Defines the type of text track (subtitles, captions, descriptions, chapters, metadata).
• src: Specifies the subtitle or caption file in WebVTT format (.vtt).
• srclang: Defines the language of the track.
• label: Provides a user-friendly title for the track displayed in the player.
• default: Marks the track as the default if no other track is selected.

Best Practices for HTML <track> Tag

• Use WebVTT (.vtt) format for maximum browser compatibility.
• Add multiple language tracks for global user reach.
• Use meaningful and descriptive labels for better accessibility and SEO.
• Include a default track to improve user experience.
• Ensure captions match spoken audio for accuracy and clarity.

FAQs About the HTML <track> Tag

Q1: What is the purpose of the HTML track tag?

The track tag is used to add subtitles, captions, or other text tracks to audio or video to improve accessibility and user experience.

Q2: Does the track tag help with SEO?

Yes, adding text tracks helps search engines understand video content better, which can improve search visibility and engagement.

Q3: How many track tags can be used in one video?

You can use multiple track tags in a single video for different languages or track types.

Q4: Which file format is supported by the track tag?

The track tag supports WebVTT files (.vtt) for captions and subtitles.

Q5: What is the difference between subtitles and captions?

Subtitles display spoken dialogue, while captions include both dialogue and background sounds for users with hearing impairments.

HTML

Related Articles