Images: alt Text, src, width, height

Embedding Images

The <img> element embeds an image. It is a void element — it has no closing tag. The two required attributes are src (the image path) and alt (a text description).

<!-- Basic image -->
<img src="/images/hero.jpg" alt="A mountain landscape at sunrise" />

<!-- With explicit dimensions (prevents layout shift) -->
<img
  src="/images/avatar.png"
  alt="Profile photo of Jane"
  width="200"
  height="200"
/>

<!-- Decorative image (empty alt) -->
<img src="/images/divider.svg" alt="" />

Writing Good Alt Text

• Describe the content and function of the image, not its appearance alone.
• Do not start with "Image of" or "Picture of" — screen readers already announce it is an image.
• For decorative images that carry no meaning, use an empty alt="" so screen readers skip them.
• For images used as links, the alt text should describe the link destination.