Images and alt text

Images turn walls of text into pages people actually want to read. The <img> element embeds them — and comes with one responsibility.

The img element

• src — where the image file lives (like href, but for embedded content)
• alt — text describing the image
• width / height — dimensions in pixels (helps pages load without jumping)

<img> is self-closing — it has no content between tags, because the image is the content.

alt text: the non-negotiable part

The alt attribute is what appears — and what's read aloud — when the image can't be seen:

• Blind and low-vision visitors hear it via screen readers
• Broken image? The alt text shows instead
• Search engines read it to understand the image

Write what the image communicates, not "image of":

alt="image"                                    ❌ says nothing
alt="photo123.jpg"                             ❌ worse
alt="Hiker celebrating on a foggy summit"     ✅ paints the picture
alt=""                                         ✅ for purely decorative images

That last one matters: an empty alt="" tells screen readers "skip this, it's decoration" — which is kinder than describing every swoosh and divider.