Chapter 8 — Images & Media

Learning Outcome

Add and control images, audio, and video in web pages using HTML5 media elements.

← 07 - Semantic HTML5 | Next → 09 - Tables

8.1 The `<img>` Tag

<img> embeds an image. It is a self-closing void element — no closing tag.

<img src="photo.jpg" alt="A sunset over the mountains">

Required Attributes

alt is NOT Optional

alt text is read by screen readers for blind users, shown when image fails to load, and indexed by search engines. An empty alt="" is acceptable only for purely decorative images.

Optional Attributes

<img
  src="photo.jpg"
  alt="Students learning HTML in a classroom"
  width="600"
  height="400"
  loading="lazy"
  title="HTML Workshop 2025"
>

Always Set width and height

Setting width and height in HTML (or CSS) prevents Cumulative Layout Shift (CLS) — where content jumps around while images load. Google PageSpeed penalises CLS.

8.2 Image Paths

<!-- Same folder -->
<img src="photo.jpg" alt="...">

<!-- Subfolder -->
<img src="images/photo.jpg" alt="...">

<!-- Go up one level -->
<img src="../images/photo.jpg" alt="...">

<!-- Absolute URL (external image) -->
<img src="https://example.com/images/photo.jpg" alt="...">

8.3 Image Formats — When to Use What

Use WebP for Performance

Convert your images to WebP before uploading. Same visual quality, 25–35% smaller file size than JPEG.

8.4 `<figure>` and `<figcaption>`

Wrap images with captions in <figure> for semantic HTML.

<figure>
  <img src="cat.jpg" alt="An orange tabby cat sitting on a windowsill">
  <figcaption>Whiskers enjoying the afternoon sun.</figcaption>
</figure>

<figure> is Not Just for Images

<figure> can wrap code blocks, charts, diagrams, or any content that has a caption.

8.5 Responsive Images with `srcset`

Provide multiple image sizes — browser picks the best one for the screen.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Responsive landscape photo"
>

8.6 HTML5 Audio — `<audio>`

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

<!-- Autoplay only works with muted in most browsers -->
<audio autoplay muted loop>
  <source src="background.mp3" type="audio/mpeg">
</audio>

8.7 HTML5 Video — `<video>`

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

Video Attributes

Multiple `<source>` Tags

Browsers don't all support the same formats. Provide fallbacks:

<video controls>
  <source src="clip.mp4" type="video/mp4">   <!-- Chrome, Edge, Safari -->
  <source src="clip.webm" type="video/webm"> <!-- Firefox fallback -->
  <!-- Text shown if browser supports neither -->
  Your browser does not support HTML5 video.
</video>

8.8 Embedding External Videos

Use <iframe> to embed YouTube or Vimeo videos:

<!-- YouTube embed -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
  allowfullscreen>
</iframe>

🚀 Recommended Projects

Project 1 — Photo Gallery Page

Create a gallery with 6+ images using <figure> and <figcaption> for each.

Write descriptive alt text for every image
Use loading="lazy" on all images
Organise into 2 sections with <section> tags

Project 2 — Media Showcase Page

Build a page featuring:

An <audio> player with controls
A <video> player with a poster image
An embedded YouTube video with <iframe>
All wrapped in semantic <figure> elements with captions

📌 Quick Recall

<img src="..." alt="..."> = image (void element, no closing tag)
alt is required — empty alt="" only for decorative images
loading="lazy" = performance boost for below-fold images
JPEG = photos | PNG = transparency | SVG = scalable vector | WebP = modern best
<audio controls> + <source> = audio player
<video controls poster="..."> + <source> = video player
Always provide multiple <source> formats as browser fallbacks