What are the Media Element Tags Introduced by HTML5?

The <video> Element

The <video> tag embeds video content. The controls attribute adds a play/pause bar, volume, and timeline. You can also set width, height, poster (a preview image), and autoplay/loop/muted attributes.

<video width="640" height="360" controls poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

The <audio> Element

The <audio> tag embeds sound such as music or podcasts. Like <video>, adding the controls attribute displays native playback controls.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

The <source> Element

The <source> tag lets you specify multiple media files (formats). The browser picks the first format it supports. This is important because different browsers support different codecs — providing MP4 and WebM (or MP3 and OGG) maximizes compatibility.

The <track> Element

The <track> tag adds text tracks to <video> or <audio>, such as subtitles, captions, or descriptions in WebVTT format. It improves accessibility and lets users read along or translate.

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