LESSON 9

Images

Learning objective: Add images with proper source and alternative text.

Understand

Images make pages richer and clearer.

The <img> element embeds an image. It is self-closing and needs two key attributes: src (where the image is) and alt (a text description shown if the image fails and read aloud by screen readers). Always write meaningful alt text.

Analogy: alt text is like a caption a friend reads to you when you cannot see the picture.

See It in Action

An image with a description:

<img src="logo.png" alt="Bynteq logo">
How it works: src tells the browser which file to load and alt describes it for accessibility and for when the image cannot load.

Try It Yourself

  1. Add an <img> pointing to an image file in your folder.
  2. Write clear alt text for it.
  3. Rename the file wrongly and refresh to see the alt text appear.

Quick Quiz

Why is the alt attribute important?

Challenge

Add two images with accurate, descriptive alt text.

Success condition: Both images load, and each has meaningful alt text.