Skip to content
Hoover Digital Media Learning Platform

Images: The <img> Element

The <img> element embeds an image into a page.

Basic syntax

Section titled “Basic syntax”
<img src="photo.jpg" alt="A photo of a sunset over the ocean">

<img> is a void element — it has no content and no closing tag.

The src attribute

Section titled “The src attribute”

src specifies the path to the image file. It works the same way as href on a link:

<!-- Same folder -->
<img src="logo.png" alt="Company logo">


<!-- Subfolder -->
<img src="images/banner.jpg" alt="Welcome banner">

If the path is wrong, the browser displays a broken image icon. Always verify your file path and filename spelling, including the extension.

The alt attribute

Section titled “The alt attribute”

alt provides a text description of the image.

<img src="team-photo.jpg" alt="The five-person development team standing outside the office">

Why alt matters

Section titled “Why alt matters”
  • Screen readers read the alt text aloud to users who cannot see the image.
  • If the image fails to load, the alt text is displayed instead.
  • Search engines use alt text to understand image content.

Writing good alt text

Section titled “Writing good alt text”

Describe what the image shows, not what it is.

PoorBetter
alt="image"alt="A golden retriever sitting in autumn leaves"
alt="photo"alt="Bar chart showing sales growth from 2023 to 2025"
alt="logo"alt="Hoover Digital Media logo"

When to use empty alt

Section titled “When to use empty alt”

If an image is purely decorative and adds no information, use alt="":

<img src="divider-line.png" alt="">

An empty alt tells screen readers to skip the image entirely. Do not omit the attribute — a missing alt causes screen readers to read the filename instead.

A broken image example

Section titled “A broken image example”
<!-- This will show a broken image icon if the path is wrong -->
<img src="typo-in-filename.jpg" alt="A mountain landscape">

The alt text will display in place of the broken image.

Exercise

Section titled “Exercise”
  1. Inside the same folder as index.html, create a subfolder called images/.
  2. Save any image file into that folder — rename it something simple like photo.jpg.
  3. Open index.html in VS Code and add the image somewhere in <body>:
<img src="images/photo.jpg" alt="A brief description of what the photo shows">

Write a real description in the alt — describe what is actually in the image.

  1. Save and open index.html in your browser to confirm the image loads.
  2. Intentionally break the src (e.g., change it to images/wrong.jpg), save, and reload — you should see the alt text appear where the image was.
  3. Fix the path and confirm the image loads correctly again.

Recap

Section titled “Recap”
  • <img src="..." alt="..."> embeds an image. No closing tag.
  • src is the path to the file — relative paths work the same as with links.
  • alt describes the image for screen readers, broken-image fallback, and search engines.
  • Write descriptive alt text. Use alt="" only for purely decorative images.
  • Never omit the alt attribute.