Chapter 6 — Embedding Media

The web is more than text. This chapter dives into everything you can embed: images, image maps, video, audio, external content via <iframe>, and even inline vector graphics, math, and pixel canvases. Every technique here builds on the structural foundations you've already mastered.

What’s Inside This Chapter

Section 6.1 — Images & Media Asset Routing
The <img> element: absolute and relative paths, alt accessibility, preventing layout shift, responsive srcset and sizes, the <picture> element for art direction, and performance attributes like loading and decoding.
Section 6.2 — Image Maps
Turning a single image into a multi‑zone interactive surface with <map> and <area>. Master the pixel coordinate system and the three hotspot shapes: rectangle, circle, and polygon.
Section 6.3 — Video & Audio
Native <audio> and <video> elements: playback controls, autoplay rules, multi‑codec source trees, preload strategies, and time‑synchronized WebVTT text tracks for subtitles, captions, and chapters.
Section 6.4 — Embedding External Content
Secure external embedding with <iframe> (sandbox, allow, lazy loading) and fallback‑ready document embedding with <object>.
Section 6.5 — Inline Graphics: SVG, MathML & Canvas
Embedding vector graphics directly in the DOM with inline SVG, writing accessible mathematical equations with MathML, and creating programmable pixel surfaces with <canvas> – plus their accessibility requirements.

START READING

Turn to Section 6.1 and begin with the most common media element on the web: the image.