HTML media tags

01

of 14

<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:

02

of 14

<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:

03

of 14

<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:

04

of 14

<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>

05

of 14

<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:

06

of 14

<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:

07

of 14

<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:

08

of 14

<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:

09

of 14

<img>

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

Example:

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

10

of 14

<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>

11

of 14

<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>

12

of 14

<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>

13

of 14

<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>

14

of 14

Supported browser

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