Images

Last lesson gave pages a way to point at each other. This lesson gives them a way to show something instead of only describing it: a photo of the mountain you're writing about, placed directly on the page.

The img element breaks the pattern: it never closes

Every element so far has followed the same shape: an opening tag, some content, a closing tag — <h1>...</h1>, <p>...</p>. The img element breaks that pattern on purpose: it has no content and no closing tag at all.

<img src="photo.jpg" alt="A snow-capped mountain at sunrise">

That's the whole element, start to finish. There's nothing to put "inside" a picture, so HTML never asks you to close one — finally, an element that asks for less paperwork.

src: which image to show

The src attribute (short for source) tells the browser which image file to load — the same job href did for a link in the last lesson, aimed at a picture instead of a page:

<img src="https://example.com/mountain.jpg" alt="...">

Like a link's href, src can be a relative path to a file sitting next to your page, or an absolute address to an image hosted somewhere else entirely.

alt: describing the picture in words

The alt attribute is a written description of the image — what someone would need to know if they couldn't see it. It earns its keep in two real situations: a screen reader speaks the alt text aloud instead of showing the picture, and if the image ever fails to load, the browser shows the alt text in the empty space where the picture should have been.

<img src="https://example.com/mountain.jpg" alt="A snow-capped mountain at sunrise">

A good alt describes what's actually in the picture, and why it's there — never the filename.

Common mistake

Leaving alt empty, or skipping it entirely, is the single most common mistake with images, and an easy one to make: a missing alt doesn't change how the page looks at all. It only turns into a problem for someone using a screen reader, or the moment an image link breaks. Writing alt="mountain.jpg" isn't much better — it repeats the filename instead of describing the picture, which helps no one who can't see it.

Exercise

Add an image

Add exactly one img element. Give it a src pointing at https://example.com/mountain.jpg, and write real alt text describing what's in the picture — not only the filename. Remember: img never gets a closing tag.