Command Palette

Search for a command to run...

Hectal
Phase 5Intermediate6 of 8 in HTML

Media and Embeds

Responsive images, fast-loading media, audio and video with captions, safe iframes, inline SVG and a first look at canvas.

Text is light; pictures, sound and video are heavy. This phase teaches you to put media on a page the right way: images that download the right size for each screen, pages that don't jump while images load, video that plays where it's allowed to, and captions so everyone can follow along.

You'll also learn to embed other websites safely with <iframe> (maps, videos, widgets) and how to lock them down, draw sharp icons with inline SVG, and meet <canvas>, the drawing surface that JavaScript paints pixel by pixel.

Every example runs offline in the preview: the images are small SVG pictures written into the code itself, and the audio and video are generated by JavaScript, so nothing depends on a network connection.

0/7 · 0%
7 topics ~3 h 21 code blocks & diagrams
Start with the first topic
1
5.1

Responsive Images

With srcset, sizes and <picture> you list several versions of an image and let the browser download only the one that fits the screen, instead of sending a huge photo to every phone.

28 min 3 code practice

2
5.2

Image Performance

Give every image a width and height so the page doesn't jump, lazy-load the ones below the fold, raise the priority of the main image, and use modern formats so fewer bytes travel.

21 min 3 code practice

3
5.3

Audio and Video

<audio> and <video> play sound and film right in the page; attributes control the player, <source> offers formats in order, and browsers only autoplay when the sound is off.

27 min 3 code practice

4
5.4

Captions and Subtitles

The <track> element attaches timed text to a video: captions for people who can't hear it, subtitles for people who don't speak its language, written in a simple text format called WebVTT.

26 min 3 code practice

5
5.5

Iframes and Embeds

An <iframe> shows another web page inside yours, such as a map or a video; title, sandbox, allow and referrerpolicy make it accessible and safe, and server headers stop other sites from framing yours.

26 min 3 code practice

6
5.6

SVG in HTML

SVG describes pictures as shapes instead of pixels, so they stay sharp at any size; written inline in HTML, every shape is an element you can colour with CSS, which makes SVG ideal for icons, logos and simple graphics.

22 min 3 code practice

7
5.7

Canvas, a First Look

<canvas> is a blank rectangle of pixels that JavaScript paints on; it's fast for games, charts and image effects, but what you draw is only pixels, so you must give it a text alternative.

21 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

An image that doesn't jump

The photo at the bottom of this page is 640 pixels wide and 360 pixels tall, and readers only see it after scrolling.

Beginner
2

Let the browser pick the size

This article photo exists in three widths: photo-400.jpg (400px wide), photo-800.jpg (800px) and photo-1600.jpg (1600px). It fills the screen on phones up to 600px wide and half the screen on anything wider.

Intermediate
3

Different crops for phones and desktops

On wide screens (800px and up) this banner should show the wide photo banner-wide.jpg; on smaller screens, the square close-up banner-square.jpg.

Intermediate
4

Accessible SVG icon buttons

Add an inline SVG heart icon at the start of the Like button. Use viewBox="0 0 24 24" and this path: M12 21 C5 15 2 11 2 7.5 A4.5 4.5 0 0 1 12 6 A4.5 4.5 0 0 1 22 7.5 C22 11 19 15 12 21 Z.

Intermediate
5

Lock down an embedded widget

This page embeds a poll widget from another team in an iframe. It needs scripts to work, but must not be able to submit forms, open popups or act as your page's origin.

Intermediate
6

Build a recipe card with media

Finish this recipe card so all its media is fast, sharp and accessible:

Advanced