HTML media tags

HTML media tags are essential elements in web development that allow you to add and control various types of multimedia content such as audio, video, images, and more on your website. They help to create engaging and interactive experiences for users by incorporating rich media elements.

HTML has several media-related tags that allow you to embed and display various types of media on a web page, including:

<audio>

The <audio> tag is used to embed audio files into a web page.

Example:

<audio controls>
  <source src="/wp-content/uploads/2023/02/mixkit-classic-alarm-995.wav" type="audio/wav">
  Your browser does not support the audio tag.
</audio>

Demo:

<video>

The <video> tag is used to embed video files into a web page.

Example:

<video width="320" height="240" controls>
  <source src="yourvideofile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Demo:

<source>

The <source> tag is used in conjunction with the <audio> and <video> tags to specify the media source for the audio or video content.

Example:

<video controls>
  <source src="yourvideofile.mp4" type="video/mp4">
  <source src="yourvideofile.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Demo:

<track>

The <track> tag is used to add a text track to an <audio> or <video> element. It is typically used to provide captions or subtitles.

Example:

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

<embed>

The <embed> tag is used to embed external content, such as a video from YouTube, on a web page.

Example:

<embed src="https://www.youtube.com/embed/bi5bfH_gVWE" width="560" height="315">

Demo:

<iframe>

The <iframe> tag is used to embed external content, such as a video from YouTube, within an HTML document.

Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/bi5bfH_gVWE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Demo:

<svg>

The <svg> tag is used to create and display scalable vector graphics.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

Demo:

<canvas>

The <canvas> tag is used to create a drawable area for graphics on a web page.

Example:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillRect(20, 20, 150, 50);
  ctx.fillStyle = "red";
  ctx.fillRect(40, 40, 100, 25);
</script>

Demo:

<img>

The <img> tag is used to embed images into a web page.

Example:

<img src="yourimage.jpg" alt="Your Image">

<area>

The <area> tag is used in conjunction with the <map> tag to define the clickable areas within an image map.

Example:

<img src="yourimage.jpg" usemap="#yourmap">
<map name="yourmap">
  <area shape="rect" coords="0,0,100,100" href="#">
  <area shape="circle" coords="150,150,50" href="#">
</map>

<map>

The <map> tag is used in conjunction with the <img> tag to create an image map.

Example:

<img src="yourimage.jpg" usemap="#yourmap">
<map name="yourmap">
  <area shape="rect" coords="0,0,100,100" href="#">
  <area shape="circle" coords="150,150,50" href="#">
</map>

<figure>

The <figure> tag is used to define self-contained content, such as an illustration or a code snippet, along with its caption.

Example:

<figure>
  <img src="yourimage.jpg" alt="Your Image">
  <figcaption>Your Image Caption</figcaption>
</figure>

<figcaption>

The <figcaption> tag is used to define a caption for a <figure> element.

Example:

<figure>
  <img src="yourimage.jpg" alt="Your Image">
  <figcaption>Your Image Caption</figcaption>
</figure>

Supported browser

Here is a table showing the browser support for each of the HTML media tags: