Images, video, audio, and multimedia content

Images in HTML

Images are fundamental to any web page. The <img> element allows you to insert images and is a void element (it has no closing tag).

Essential attributes

Every image needs at least two attributes:

<img src="path-to-image.jpg" alt="Description of the image">

• src — The path or URL of the image
• alt — Alternative text that describes the image

The alt attribute is crucial for three reasons:

1. Accessibility: Screen readers read this text to users with visual disabilities
2. SEO: Search engines use the alternative text to index images
3. Fallback: It is displayed when the image cannot be loaded

Image dimensions

Always specify width and height on images to prevent layout shift (content jumping while the page loads):

<img
  src="photo.jpg"
  alt="Mountain landscape"
  width="800"
  height="600"
>

These values define the aspect ratio that the browser reserves before downloading the image. CSS can then resize the image, but the space is already reserved.

Image formats

Choosing the right format directly impacts performance:

Responsive images with picture

The <picture> element allows you to serve different images based on the device or supported format:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

The browser uses the first source it supports. The final <img> acts as a universal fallback.

Lazy Loading

The loading attribute controls when an image is downloaded:

<!-- Loads immediately (default) -->
<img src="hero.jpg" alt="Main banner" loading="eager">

<!-- Loads when near the viewport -->
<img src="section-3.jpg" alt="Secondary content" loading="lazy">

Use loading="lazy" on images that are not visible when the page loads. Hero or header images should keep loading="eager" (or omit the attribute).

Figures with captions

The <figure> element groups an image with its caption (<figcaption>):

<figure>
  <img src="sales-chart.png" alt="Bar chart showing quarterly sales" width="600" height="400">
  <figcaption>Sales by quarter in 2025. Source: commercial department.</figcaption>
</figure>

This is semantically correct and helps search engines associate the caption with the image.

Video in HTML

The <video> element allows you to embed video directly without the need for plugins:

<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Your browser does not support HTML5 video.</p>
</video>

Important <video> attributes:

• controls — Shows playback controls
• poster — Thumbnail image before playback
• preload — none, metadata, or auto
• autoplay — Plays automatically (requires muted)
• muted — Muted by default
• loop — Loops playback

Audio in HTML

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

<audio controls preload="metadata">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Embedded content with iframe

The <iframe> element allows you to embed external content such as YouTube videos or maps:

<iframe
  src="https://www.youtube.com/embed/abc123"
  width="560"
  height="315"
  title="Basic HTML tutorial"
  allow="accelerometer; autoplay; clipboard-write"
  allowfullscreen
  loading="lazy"
></iframe>

Always add the title attribute to iframes for accessibility.

Practice

1. Insert images with best practices: Add 3 images to a page: one informative with a descriptive alt, one decorative with alt="", and one inside a <figure> with <figcaption>. Include width and height on all of them.
2. Use the picture element: Create a <picture> that serves a WebP image as the primary source and a JPG as fallback, adapting to different screen sizes with media.
3. Add a video with fallback: Insert a <video> with controls, poster, two <source> formats (webm and mp4), and a text message for browsers that do not support video.

In the next lesson, we will learn how to organize data in HTML tables.