HTML · Module 06 · Lesson 24 of 54

Image Sourcing & Accessibility

What is the Image Element?

Think of a physical frame hanging on a wall. The frame itself doesn't contain a picture; it has a clip on the back holding a printed photo. If the photo is missing, you see a small fallback label on the back explaining what the photo was (like "Summer Vacation").

In HTML, the <img> tag is an empty frame that loads an image file from the web. It is a self-closing tag (no </img> needed) and requires two main attributes:

src: The source path to the image file (absolute or relative).

alt: Alternative text. This is a descriptive caption read aloud by screen readers and displayed if the image fails to load.

Why does it matter?

Images bring life, branding, and visuals to websites. Adding alt text is critical for accessibility (so blind users know what is in the picture) and SEO (so search engines like Google can index your images).

How to write it

<img src="https://picsum.photos/100" alt="Square Landscape" width="100">

In this example:

src points to the photo file URL.

alt describes the image.

width sets the width in pixels (you don't write "px" in HTML attributes, just the number).

Responsive Box

Common Mistakes

Leaving out the alt attribute: Skipping alt is a major accessibility violation. If an image is purely decorative, write alt="" so screen readers know they can skip it.

Forgetting that <img> is self-closing: Never write <img></img>.

Quick Reference

<img src="path" alt="description"> — Embeds a graphic.

width="value" and height="value" — Attributes to set sizes.

Your Task

Embed an image with `src="https://picsum.photos/100"` and `alt="Square Landscape"`, and define a `width` attribute of '100'.

index.html

Type code above to start the lesson.

Live Preview