Tagg the Builder saysThe <img> element embeds an image; src is the file and alt is the text shown if it fails or is read aloud.
<img src="photo.jpg" alt="a description"> places an image. src is the path; alt is non-negotiable — it's read by screen readers and shows if the image fails to load. Write alt that describes the image's purpose, not "image of…".
Set width/height attributes to reserve space and avoid layout shift while the image loads. <img> is a void element — no closing tag.
Power-ups you unlock
<img src="..." alt="..."> — alt is required for accessibility
alt shows on load failure and is read by screen readers
Set width/height to prevent layout shift
It is a void element — no closing tag
The Unclosed Tag attacks — common mistakes
Omitting alt entirely (fails accessibility) or stuffing it with keywords
Skipping width/height → content jumps as images load
Loading a huge file and scaling it down with attributes (wastes bandwidth)
Boss battleAdd a working image and a broken one. Confirm the broken image shows its alt text, then add width/height to both.
Example code
<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d">
<img src="https://via.placeholder.com/200x120" alt="a 200 by 120 placeholder" width="200" height="120">
<img src="broken-path.jpg" alt="this alt text shows because the image is missing">
</body></html>