HTML Media

Modern web pages are rich with media — photos, videos, audio clips, and embedded content from other sites. HTML5 provides powerful native elements for embedding media without relying on third-party plugins like Flash.

Images: <img>

The <img> element embeds images into the page. It is a void element (self-closing):

<img src="photo.jpg" alt="A scenic mountain view" width="800" height="600">

Required Attributes

• src — the path or URL to the image
• alt — alternative text for accessibility and fallback

Optional Attributes

• width / height — dimensions in pixels (helps prevent layout shift)
• loading — "lazy" for lazy loading, "eager" for immediate loading
• decoding — "async" or "sync" for decoding hints

Responsive Images with srcset and sizes

The srcset attribute lets you provide multiple image resolutions for different screen sizes:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="A scenic mountain view"
>

The browser selects the most appropriate image based on the viewport size and device pixel ratio.

The <picture> Element

The <picture> element provides more control over responsive images, including art direction and format selection:

<picture>
  <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="photo-tablet.jpg">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="A scenic mountain view">
</picture>

The browser picks the first matching <source> element. The <img> at the end serves as a fallback for older browsers.

Video: <video>

The <video> element embeds video content natively:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser does not support video. <a href="video.mp4">Download it here</a>.</p>
</video>

Key Attributes

• controls — shows play/pause, volume, and fullscreen controls
• autoplay — starts playing automatically (use with muted for browser policies)
• muted — starts muted
• loop — repeats the video
• poster — placeholder image before video starts
• preload — "none", "metadata", or "auto"

Always provide multiple formats (MP4, WebM) for browser compatibility.

Audio: <audio>

The <audio> element works similarly to <video>:

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

Iframes: <iframe>

The <iframe> element embeds another HTML page within the current page:

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  allowfullscreen
  loading="lazy"
></iframe>

Security with sandbox

The sandbox attribute restricts what the embedded document can do:

<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>

Possible values: allow-forms, allow-scripts, allow-same-origin, allow-popups, allow-modals.

The <figure> and <figcaption> Elements

<figure> wraps self-contained media content, and <figcaption> provides a caption:

<figure>
  <img src="chart.png" alt="Sales chart for Q1 2026">
  <figcaption>Q1 2026 sales figures showing 15% growth.</figcaption>
</figure>

Using <figure> improves semantic structure and accessibility — screen readers can associate the caption with the media.