HTML Images

Understand the topic

The img element embeds an image. src supplies the resource URL and alt supplies a text alternative based on the image purpose. Informative images need a useful description; purely decorative images usually use alt="". Explicit width and height reserve space and reduce layout movement. Use CSS to keep images within narrow containers.

Worked example

<figure>
  <img src="/assets/icons/kanbritech_favicon.png" alt="Kanbritech Academy emblem" width="96" height="96">
  <figcaption>The academy emblem.</figcaption>
</figure>

This example uses an existing local image. The caption is visible to everyone; the alternative text communicates what the image represents if it cannot be seen.

Practice

Write markup for a decorative border image and explain its alternative text.

<img src="border.png" alt="" width="600" height="20">
An empty alternative avoids announcing a decoration as meaningful content.

Common mistake

Do not repeat "image of" unnecessarily or omit alt. A missing attribute and an intentionally empty alternative are different.

HTML documentation