Images and Void Elements: A Tag With No Closing Partner

Your page has a name, words, links, and no face at all. This lesson adds your photo, and with it, the first tag that never gets a closing partner.

The concept

Here is your page as it stands. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Here is an image, added with one tag. Run it:

ONE TAG, NO CLOSING PARTNER · HTML

Untitled

RUN TO SEE YOUR PAGE

The photo shows up, and there is no </img> anywhere in the code. Every element so far, <h1>, <p>, <li>, <a>, has wrapped something: words, other elements, content of some kind. An image has nothing to wrap. It does not contain a photo. It points at one, and describes it, entirely through its attributes.

Now watch what happens when that pointer is wrong. Run this:

THE SAME TAG, A SOURCE THAT FAILS · HTML

Untitled

RUN TO SEE YOUR PAGE

The photo never loads, but the space is not empty either. Text takes its place: the exact words from the alt attribute. That is what alt is actually for. Not decoration, not a caption. A stand-in for whenever the image cannot be seen: broken, slow, or a screen reader announcing the page instead of showing it.

The syntax

<img src="https://example.com/photo.jpg" alt="A description of the photo" />

<img> is a void element: a tag with no closing partner and nothing between tags, because there is nothing to wrap. src holds the image's address, a URL, the same kind of value href held in the last lesson. alt holds the description, and it is not optional in spirit even when the page technically works without it.

You will sometimes see a / immediately before the final > on tags like this one. It is optional, it is not a closing tag, and it changes nothing. The browser reads <img> and <img /> identically.

Void elements are self-contained. Everything they need, they carry in their own attributes, on one tag, and then they are finished.

A minimal working example

photo.html

<img src="https://placehold.co/300x300" alt="A friendly illustrated placeholder avatar" />

One line. One tag. A real image, fully described, with nothing left open.

Common mistakes

Treating alt as optional because the page still works without it. You leave alt off, and the image displays exactly the same either way. Nothing on screen tells you anything is missing. A screen reader tells a different story. With no alt, a screen reader has nothing useful to say. Many fall back to reading the image's file name aloud, which tells the listener nothing. Write alt every time, whether or not the page seems to need it.

Expecting alt to appear as a hover tooltip. You hover over a working image, expecting the alt text to pop up, the way it might in an old screenshot or tutorial. In current browsers, it does not. Alt only shows itself when the image fails to load. If a working image needs hover text too, that is a different attribute, for a different lesson.

Writing alt text that says nothing. You fill the attribute in because the lesson said to, with alt="image" or the filename itself, alt="IMG_4821.jpg". Technically present, practically useless. If the photo vanished and only the alt text remained, would a stranger know what was supposed to be there?

Try it yourself

Your page has words, links, and no photo. Add one.

Run the starting code below. Confirm the page has no image anywhere yet.
Add an <img> element near the top of your page, immediately above your <h1>.
Set src to https://placehold.co/240x240, and write a real, specific alt description, not a placeholder word.
Run it. Confirm the placeholder photo appears, with no closing tag anywhere near it.
Break it on purpose: change the src value to https://this-domain-does-not-exist-abc123.example/photo.jpg, and run it. Watch your own alt text take its place, and confirm it still makes sense on its own. Put the correct src back.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your page now has a face, described in words for anyone who cannot see it. Skills, About and Contact all sit in a flat stack with no visual landmarks between them. The next lesson gives the page real structure: named regions a screen reader, and you, can navigate by.