← HTML & CSS

Images (img, src, alt)

An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.

Part of: HTML and CSS Journey — Module 17

What it does: alt="Company logo" describes the image. Screen readers announce this text to visually impaired users. src="banner.jpg" tells the browser which file to load. alt="Banner" describes it for accessibility. <img> is self-closing. It has no content and no closing tag - adding </img> is invalid HTML. src provides the image path on <img>. href is used on <a> elements for link destinations. alt is an accessibility attribute. It is not a visible caption - use <figcaption> inside <figure> for a visible caption. alt must always be present. Omitting it is an accessibility failure. For decorative images with no meaning, use alt="". The second option is missing the required alt attribute. Both src and alt must be present on every <img>.

Common mistakes: The <img> tag is missing the required alt attribute. Always include alt="description" for accessibility and fallback text. The alt value must be enclosed in double quotes: alt="Hero banner", not alt=Hero banner without quotes.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Images (img, src, alt) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

True or false: <img> needs a closing </img> tag.

FalseTrue

Matches

↓

The alt attribute is missing - every <img> must include alt for accessibility

Applying

Meanings

Term

alt

Meaning

An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.

Practice

Testing

Gaps

< src="photo.jpg" alt="A cat">

Check Answer

Spots

1<img src="cat.jpg">

2Caption here.

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. True or false: <img> needs a closing </img> tag.

A. False ✓

B. True

<img> is self-closing. It has no content and no closing tag - adding </img> is invalid HTML.

2. Which attribute specifies the image file to display?

A. src ✓

B. href

src provides the image path on <img>. href is used on <a> elements for link destinations.

3. What is the purpose of the alt attribute on an <img>?

A. Provides text shown if the image fails and read by screen readers ✓

B. Sets the caption displayed below the image

alt is an accessibility attribute. It is not a visible caption - use <figcaption> inside <figure> for a visible caption.

4. True or false: it is acceptable to omit alt on an <img>.

A. False ✓

B. True

alt must always be present. Omitting it is an accessibility failure. For decorative images with no meaning, use alt="".

5. True or false: <IMAGE src="x.jpg"> is valid HTML.

A. False ✓

B. True

<IMAGE> is not a valid HTML element. The correct self-closing element is <img> in lowercase.

Match the Pairs

<img src="dog.jpg" alt="A dog"> → Embeds dog.jpg - 'A dog' is shown to screen readers or if the image fails to load

<figure> <img src="x.jpg" alt="X"> </figure> → A self-closing img with both src and alt inside a figure element - no closing </img> tag needed

alt provides a text description for screen readers and when the image cannot load → <img src="logo.png" alt="Company logo">

src specifies the path or URL of the image file to be displayed → <img src="banner.jpg" alt="Banner">

<img src="cat.jpg"> → The alt attribute is missing - every <img> must include alt for accessibility

<img src="dog.jpg" alt="Dog"></img> → <img> is self-closing - it must not have a closing </img> tag

Key Term

alt

An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.

Fill in the Blanks

1. <img src="photo.jpg" alt="A cat">

Hint: Type the self-closing element name used to embed an image

2. <img src="logo.png" alt="Logo">

Hint: Type the attribute name that provides the image file path

3. <img src="banner.jpg" alt="Banner">

Hint: Type the attribute name that provides accessible alternative text for the image

4. <figure> <img src="cat.jpg" alt="Cat"> </figure>

Hint: Type the attribute that specifies which image file to display

5. <img src="icon.png" alt="Icon">

Hint: Type the attribute that describes the image for screen readers and fallback display

Spot the Error

Question 1

A <img src="cat.jpg">

B Caption here.

C More text.

Line A — The <img> tag is missing the required alt attribute. Always include alt="description" for accessibility and fallback text.

Question 2

A Hero image:

B <img src="hero.jpg" alt=Hero banner>

C Welcome text.

Line B — The alt value must be enclosed in double quotes: alt="Hero banner", not alt=Hero banner without quotes.

Question 3

A <figure>

B <img src="sunset.jpg">

C alt="Sunset view">

D <figcaption>Sunset.</figcaption>

E </figure>

Line C — The alt attribute must be inside the <img> opening tag, not on a separate line. Write: <img src="sunset.jpg" alt="Sunset view">.

Question 4

A <div>

B <img src="dog.jpg" alt="Dog">

C <img src="cat.jpg" alt="Cat">

D <image src="bird.jpg" alt="Bird">

E </div>

Line D — <image> is not a valid HTML element. The correct self-closing element for images is <img>.

Question 5

A Profile photo:

B <img src="avatar.jpg" alt="Profile photo">

C <img src="logo.png" alt="Logo">

D <img src="banner.jpg" alt="Banner">

E <img src="icon.png">

Line E — The last <img> tag is missing the alt attribute. Every <img> must have alt="description" for accessibility.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?