HTML default Attribute

What You’ll Learn

The default attribute is a boolean attribute on the <track> element. It tells the browser which text track (subtitles, captions, or other timed text) should be enabled by default on a <video> or <audio> element, unless the user chooses another track. It is not used for form default values.

Purpose of default

When a video or audio element has multiple <track> elements (for example English and Spanish subtitles), the default attribute marks which track the browser should enable when the page loads, if the user’s preferences do not indicate another track is more appropriate.

This helps viewers see captions or subtitles immediately without opening the player menu first. It is especially important for accessibility when you provide multiple language options or both captions and subtitles.

📝 Syntax

Add default to the <track> element that should load first:

<video controls>

  <source src="movie.mp4" type="video/mp4">

  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" default>

  <track kind="subtitles" src="subs-es.vtt" srclang="es" label="Español">

</video>

Syntax Rules

• Boolean attribute: write default alone or as default="".
• Only valid on <track> inside <video> or <audio>.
• Pair with kind, src, srclang, and label on the track.
• Use at most one default track per kind (subtitles, captions, etc.) per media element.

💎 Values

The default attribute is a boolean attribute. It has no meaningful string values:

• Attribute present — This track is the default text track for its kind.
• Attribute absent — The track is available but not enabled by default.

<!-- Default English subtitles -->

<track kind="subtitles" src="en.vtt" srclang="en" label="English" default>



<!-- Optional Spanish track (not default) -->

<track kind="subtitles" src="es.vtt" srclang="es" label="Español">

Applicable Elements

default vs form default values

Beginners often confuse the default attribute with setting initial form values. They are different concepts:

Examples Gallery

Default subtitle tracks on video, JavaScript control, and the correct form attributes beginners should use instead.

<video controls>

  <source src="count.mp4" type="video/mp4">

  <track kind="subtitles" src="count.vtt" srclang="en" label="English" default>

  <track kind="subtitles" src="count_es.vtt" srclang="es" label="Español">

</video>

<script>

  var track = document.getElementById("trackEn");

  console.log(track.default); // true if default attribute is set

  track.default = true;

</script>



<video id="demoVideo" controls>

  <source src="count.mp4" type="video/mp4">

  <track id="trackEn" kind="subtitles" src="count.vtt" srclang="en" label="English" default>

  <track id="trackEs" kind="subtitles" src="count_es.vtt" srclang="es" label="Español">

</video>

<input type="text" value="JohnDoe">

<input type="checkbox" checked>

<option value="US" selected>United States</option>

♿ Accessibility & UX

• Enable captions by default — Use default on a captions or subtitles track so deaf and hard-of-hearing users see text immediately.
• Match user language — Prefer the track that matches the page language or offer multiple labeled tracks.
• One default per kind — Avoid marking multiple tracks as default for the same kind; browsers may behave unpredictably.
• Provide kind and label — Clear label text (e.g. “English”, “Español”) helps users pick tracks in the player menu.
• Do not rely on autoplay alone — Default tracks work with user-controlled playback; pair with controls on video.

💡 Best Practices