Background vs img
Learn the <img alt=""> rule for decorative images.
img or background-image?
There are two ways to put an image on a page: HTML's <img> or CSS's background-image. Which one you pick depends on whether the image is content or decoration.
Content images (a news photo, a product shot, an infographic) go in <img>; they take an alt text, are read by screen readers and indexed by search engines. Decorative images (a background texture, a divider line) go in CSS; they add no meaning and should stay silent for screen readers.
Empty alt vs no alt
Sometimes an image sits next to content but is still decoration, like an ornamental divider beside a <figure>. If you must put it in an <img>, write alt="" (an empty value).
An empty alt is not the same as no alt. With alt="" the screen reader skips it on purpose; without alt, the screen reader has to read out the file name. So always write alt, even when empty.
Exercise Write a figure, a content img and a decorative img
Add a <figure> to body. Inside it put an <img> with src set to art-piece.jpg and alt set to Flowers. Inside the figure add a <figcaption> with the text Flower show. After the figure add a decorative <img> with src set to divider.png and an empty alt.
Show example solution
<body>
<figure>
<img src="art-piece.jpg" alt="Flowers">
<figcaption>Flower show</figcaption>
</figure>
<img src="divider.png" alt="">
</body>Test yourself
-
Which is the right markup for a decorative ornament?
- <img src="orn.png" alt="ornament">
- <img src="orn.png" alt="Decorative ornament">
- <img src="orn.png" alt="">
- <img src="orn.png" alt="Background ornament">
Show answer
<img src="orn.png" alt=""> — Correct. Decorative images keep alt empty; the screen reader skips them.
-
Write an empty alt on a decorative img
<img src="divider.png" ____>Show answer
<img src="divider.png" alt=""> -
Match each case to the right method
- News photo
- img + full alt
- Background texture
- CSS background
- Ornamental divider
- img + empty alt
- Brand logo
- img + logo text