HTML kind Attribute

Introduction

The kind attribute is used on the <track> element to tell the browser what type of text track you are providing—subtitles, captions, audio descriptions, chapter markers, or metadata. Text tracks live inside <video> or <audio> and point to a WebVTT (or similar) file via the src attribute. They are essential for accessible, multilingual media.

What You’ll Learn

Purpose of kind

The primary purpose of the kind attribute is to classify a text track so the browser and assistive technologies know how to present it. A track with kind="captions" is treated as closed captions; kind="descriptions" provides spoken narration of visual action for blind users; kind="chapters" supplies navigation markers; and kind="metadata" exposes data cues that scripts can read without showing on screen.

Without a meaningful kind, browsers default to subtitles. Choosing the correct value helps users pick the right option from the media player’s captions menu and ensures accessibility guidelines are met.

📝 Syntax

Add one or more <track> elements as children of <video> or <audio>:

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

Syntax Rules

• Valid only on <track> elements inside <video> or <audio>.
• Always pair kind with src (WebVTT URL), srclang (BCP 47 language), and label (user-visible name).
• Use the default boolean attribute on one track to pre-select it when the media loads.
• Default value if omitted: subtitles.
• Multiple tracks may share the same kind but differ in srclang (e.g. English and Spanish subtitles).
• Do not put kind on <source>—that element describes media containers, not text overlays.

💎 Values

The kind attribute accepts one of five keyword values defined in the HTML specification:

• subtitles — Translation or transcription of dialogue. Assumes the viewer can hear non-speech audio. Default when kind is omitted.
• captions — Transcription of dialogue and relevant sound effects (e.g. [door slams]). For deaf and hard-of-hearing viewers.
• descriptions — Text describing visual content, often read aloud by screen readers or synthesized speech as an audio description track.
• chapters — Chapter titles or section markers the user can jump to in supported players.
• metadata — Cues for scripts or APIs; not intended for on-screen display to end users.

In JavaScript, read or set the property on the track element:

document.querySelector("track").kind = "captions";

Applicable Elements

subtitles vs captions

Examples Gallery

English subtitles on a video, multiple track kinds for accessibility, and updating kind with JavaScript.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="movie-en.vtt"
    srclang="en"
    label="English"
    default>
  Your browser does not support the video tag.
</video>

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track kind="captions" src="lecture-en-cc.vtt" srclang="en" label="English CC" default>
  <track kind="subtitles" src="lecture-es.vtt" srclang="es" label="Español">
  <track kind="descriptions" src="lecture-ad.vtt" srclang="en" label="Audio description">
  <track kind="chapters" src="lecture-chapters.vtt" srclang="en" label="Chapters">
</video>

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

<script>
  document.getElementById("dynamicTrack").kind = "descriptions";
</script>

♿ Accessibility

• Use kind="captions" for deaf users — Include non-speech sounds, not just dialogue.
• Offer descriptions tracks — Narrate important visual action for blind viewers when video conveys information only on screen.
• Write clear label text — Users choose tracks from the menu by label; “English CC” is clearer than “Track 1”.
• Set srclang accurately — Assistive tech and browsers use BCP 47 language tags (e.g. en, es).
• Mark one track default — Pre-enable the most accessible option (often captions in the viewer’s language).
• Do not rely on burnt-in subtitles in the video file alone — Separate WebVTT tracks are searchable, toggleable, and translatable.

💡 Best Practices