Images
Images are where this course's recurring theme — semantic meaning, not just visual appearance — matters most concretely. The single most important attribute covered in this chapter, alt, has real consequences for accessibility, SEO, and what happens when an image simply fails to load.
The <img> Tag
A void element (Chapter 1) — no closing tag. src is the image's location (relative or absolute, exactly as covered for links in Chapter 4); alt is a text description of the image's content.
Why alt Text Actually Matters
- Screen readers read it aloud — for a visually impaired user, alt text IS the image, the only way they experience it at all.
- It displays if the image fails to load — a broken image link, a slow connection, or a typo'd filename all show the alt text as a fallback instead of nothing.
- Search engines use it — image search results and general SEO both weigh alt text meaningfully.
Writing genuinely good alt text
alt="" — an explicit empty string. This tells screen readers to skip it silently, rather than reading out a filename or, worse, having no alt attribute at all, which is technically invalid HTML and produces inconsistent, often worse, fallback behaviour across different browsers and screen readers.
Sizing Attributes
Specifying both width and height (in pixels, no unit needed in the attribute itself) lets the browser reserve the correct space for the image before it finishes loading — preventing the rest of the page's content from visibly jumping around as images load in, a real and measurable user-experience problem on slower connections.
figure and figcaption — Images with Captions
When an image needs a caption, <figure> and <figcaption> together provide the correct semantic wrapper — rather than just placing a <p> next to an <img> with no formal relationship between them.
Basic Audio
The controls attribute shows the browser's built-in play/pause/volume UI — without it, audio loads but gives the visitor no way to interact with it at all. The text inside the tags is a fallback shown only on genuinely ancient browsers that don't support <audio>.
Basic Video
| Attribute | What it does |
|---|---|
| controls | Shows the built-in playback UI — almost always wanted |
| autoplay | Starts playing immediately on page load — use very sparingly; most browsers mute autoplay by default unless the muted attribute is also present |
| loop | Restarts automatically when playback ends |
| muted | Starts with no sound — often required alongside autoplay for it to work at all |
| poster | (video only) An image shown before playback starts, instead of a blank/black frame |
muted — that combination is reliably allowed across browsers; autoplay with sound, generally, is not.
Chapter 5 Quick Reference
- <img src="..." alt="..."> — alt is read by screen readers, shown if the image fails, and used by search engines
- Decorative images: alt="" (explicit empty), never a missing alt attribute entirely
- width/height attributes reserve layout space before the image loads, preventing visible content jumping
- <figure>/<figcaption> — the correct semantic pairing for a captioned image
- <audio controls>/<video controls> — controls attribute is almost always wanted
- autoplay + muted is reliably allowed; autoplay with sound generally is not, and is widely disliked anyway
- Next chapter: tables — structure, headers, and basic accessibility