Learnify | Simplifying Web Development

Learn how to use HTML media elements like `<img>`, `<audio>`, `<video>`, `<canvas>`, and more to embed multimedia and enhance user experience on your web pages.

Media Elements

Media elements in HTML provide ways to include and manipulate various forms of media such as images, audio, and video.

These elements enable richer content and interactive experiences on web pages. Media is a critical aspect of modern web design, offering ways to deliver content that enhances user engagement and accessibility.

Common elements:

<img>
<audio>
<video>
<track>
<canvas>
<figure>
<figcaption>
<picture>
<source>
<embed>
<object>
<iframe>
<svg>

img

The <img> HTML element is used to embed an image into the document.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <img src="img.png" alt="img" />
 </body>
</html>

The <img> HTML element does not contain a closing tag. Attributes for this element are alt, crossorigin, height, ismap, loading, longdec, referrerpolicy, sizes, src, srcset, usemap and width.

audio

The <audio> HTML element is used to play an audio file on a web page.

The <audio> tag can contain one or more <source> tags with different audio sources. The browser will choose the first source it supports.

If the browser does not support the audio element, then it will show the text written between the <audio> and </audio> tags.

HTML5 supports only MP3, WAV, and OGG audio formats.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <audio controls>
   <source src="audio.mp3" type="audio/mp3" />
   <source src="audio.wav" type="audio/wav" />
   <source src="audio.ogg" type="audio/ogg" />
   Your browser does not support the audio tag.
  </audio>
 </body>
</html>

The <audio> HTML element includes both opening (<audio>) and closing (</audio>) tags.

Attributes for the <audio> element are autoplay, controls, loop, muted, preload, and src.

video

The <video> HTML element is used to play a video file on a web page.

The <video> tag can contain one or more <source> tags with different video sources. The browser will choose the first source it supports.

If the browser does not support the video element, then it will show the text written between the <video> and </video> tags.

HTML5 supports only MP4, WEBM, and OGG video formats.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <video width="500px" height="500px" controls>
   <source src="video.mp4" type="video/mp4" />
   <source src="video.webm" type="video/webm" />
   <source src="video.ogg" type="video/ogg" />
   Your browser does not support the video tag.
  </video>
 </body>
</html>

The <video> HTML element includes both opening (<video>) and closing (</video>) tags.

Attributes for the <video> element are autoplay, controls, height, loop, muted, poster, preload, src, and width.

track

The <track> HTML element is used to specify subtitles, caption files for <audio> or <video> elements.

Tracks are formatted in WebVTT format (.vtt files).

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <audio width="320" height="240" controls>
    <source src="audio.mp3" type="audio/mp3" />
 
    <track
     src="subtitles_en.vtt"
     kind="subtitles"
     srclang="en"
     label="English"
    />
 
    <track
     src="subtitles_ja.vtt"
     kind="subtitles"
     srclang="ja"
     label="Japanese"
    />
 
   </audio>
 </body>
</html>

The <track> HTML element does not include a closing tag. Attributes for this element are default, kind, label, src, and srclang.

canvas

The <canvas> HTML element is used to draw graphics and animations on your web page.

This element is only a container for the graphics. You have to use CSS or JavaScript to create the graphics and animations.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
  <style>
    #mycanvas {
      border: 2px solid blue;
    }
  </style>
 </head>
 <body>
   <canvas id="mycanvas" width="100" height="100"></canvas>
 </body>
</html>

The <canvas> HTML element includes both opening (<canvas>) and closing (</canvas>) tags.

Attributes for the <canvas> element are height and width.

figure

The <figure> HTML element is used to mark up a photo, illustration, or diagram in the document on a web page.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <figure>
     <img src="image.jpg" alt="image" />
     <figcaption>Image caption</figcaption>
   </figure>
 </body>
</html>

The <figure> HTML element includes both opening (<figure>) and closing (</figure>) tags.

figcaption

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

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <figure>
     <img src="image.jpg" alt="image" />
     <figcaption>Image caption</figcaption>
   </figure>
 </body>
</html>

The <figcaption> HTML element includes both opening (<figcaption>) and closing (</figcaption>) tags.

picture

The <picture> HTML element is used when you have to display different images based on different viewports, heights, and widths.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <picture>
     <source media="(min-width:750px)" srcset="img_1.jpg" />
     <source media="(min-width:465px)" srcset="img_2.jpg" />
     <img src="img_3.jpg" alt="Pictures" style="width: auto" />
   </picture>
 </body>
</html>

The <picture> element contains two elements: one <img> element and one or more <source> elements.

The browser will look for the first <source> element where, if the media query matches the current viewport width, then it will display the image specified in the srcset attribute.

The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source elements match.

The <picture> HTML element includes both opening (<picture>) and closing (</picture>) tags.

source

The <source> HTML element is used to specify multiple media resources for media elements such as <audio>, <picture>, and <video>.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <audio controls>
     <source src="audio.mp3" type="audio/mp3" />
     <source src="audio.wav" type="audio/wav" />
     <source src="audio.ogg" type="audio/ogg" />
     Your browser does not support the audio tag.
   </audio>
 </body>
</html>

The <source> HTML element includes both opening (<source>) and closing (</source>) tags. Attributes for this element are media, sizes, src, srcset, and type.

embed

The <embed> HTML element embeds external content such as multimedia, third-party applications, plugins, etc., in the document.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <embed src="embed.html" width="400" height="200" type="text/html" />
   <embed src="embed.jpg" width="400" height="200" type="image/jpg" />
   <embed src="embed.mp4" width="400" height="200" type="video/webm" />
 </body>
</html>

The <embed> HTML element is a self-closing tag, i.e., it does not contain a closing tag. Attributes for this element are height, width, src, and type.

object

The <object> HTML element defines a container for an external resource, such as a picture, a media player, or a plug-in application.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <object data="object.jpg" width="500px" height="500px"></object>
  <object data="object.html" width="500px" height="500px"></object>
 </body>
</html>

The <object> HTML element includes both opening (<object>) and closing (</object>) tags. Attributes for this element are data, form, height, name, type, typemustmatch, usemap, and width.

iframe

The <iframe> (Inline frame) HTML element is used to embed another document within the current HTML document.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <h1>Initial frame</h1>
  <iframe
   src="iframe.html"
   height="500px"
   width="500px"
   title="Iframe"
   frameborder="0"
  ></iframe>
 </body>
</html>

The <iframe> HTML element includes both opening (<iframe>) and closing (</iframe>) tags. Attributes for this element are allow, allowfullscreen, allowpaymentrequest, height, loading, name, sandbox, src, srcdoc, and width.

svg

The <svg> HTML element is used to define a container for SVG graphics.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <svg width="200" height="200">
   <circle
    cx="100"
    cy="100"
    r="80"
    stroke="blue"
    stroke-width="4"
    fill="blueviolet"
   />
  </svg>
 </body>
</html>

The <svg> HTML element includes both opening (<svg>) and closing (</svg>) tags.