Images (img, src, alt)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. True or false: <img> needs a closing </img> tag.
2. Which attribute specifies the image file to display?
3. What is the purpose of the alt attribute on an <img>?
4. True or false: it is acceptable to omit alt on an <img>.
5. True or false: <IMAGE src="x.jpg"> is valid HTML.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<img src="dog.jpg" alt="A dog"> | AA self-closing img with both src and alt inside a figure element - no closing </img> tag needed | |
| 2<figure> <img src="x.jpg" alt="X"> </figure> | B<img src="banner.jpg" alt="Banner"> | |
| 3alt provides a text description for screen readers and when the image cannot load | C<img> is self-closing - it must not have a closing </img> tag | |
| 4src specifies the path or URL of the image file to be displayed | D<img src="logo.png" alt="Company logo"> | |
| 5<img src="cat.jpg"> | EEmbeds dog.jpg - 'A dog' is shown to screen readers or if the image fails to load | |
| 6<img src="dog.jpg" alt="Dog"></img> | FThe alt attribute is missing - every <img> must include alt for accessibility |
C
Definitions
alt
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___ src="photo.jpg" alt="A cat">
2.
<img ___="logo.png" alt="Logo">
3.
<img src="banner.jpg" ___="Banner">
4.
<figure>
<img ___="cat.jpg" alt="Cat">
</figure>
5.
<p><img src="icon.png" ___="Icon"></p>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<img src="cat.jpg">
B
<p>Caption here.</p>
C
<p>More text.</p>
Question 2
A
<p>Hero image:</p>
B
<img src="hero.jpg" alt=Hero banner>
C
<p>Welcome text.</p>
Question 3
A
<figure>
B
<img src="sunset.jpg">
C
alt="Sunset view">
D
<figcaption>Sunset.</figcaption>
E
</figure>
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>
Question 5
A
<p>Profile photo:</p>
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">
Answer Key
Images (img, src, alt)
Section A: Quick Questions
Q1
A — False
Q2
A — src
Q3
B — Provides text shown if the image fails and read by screen readers
Q4
B — False
Q5
A — False
Section B: Match the Pairs
Q1
<img src="dog.jpg" alt="A dog"> → Embeds dog.jpg - 'A dog' is shown to screen readers or if the image fails to load
Q2
<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
Q3
alt provides a text description for screen readers and when the image cannot load → <img src="logo.png" alt="Company logo">
Q4
src specifies the path or URL of the image file to be displayed → <img src="banner.jpg" alt="Banner">
Q5
<img src="cat.jpg"> → The alt attribute is missing - every <img> must include alt for accessibility
Q6
<img src="dog.jpg" alt="Dog"></img> → <img> is self-closing - it must not have a closing </img> tag
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
<img src="photo.jpg" alt="A cat">Q2
<img src="logo.png" alt="Logo">Q3
<img src="banner.jpg" alt="Banner">Q4
<figure>
<img src="cat.jpg" alt="Cat">
</figure>Q5
<p><img src="icon.png" alt="Icon"></p>Section E: Spot the Error
Q1
A — The <img> tag is missing the required alt attribute. Always include alt="description" for accessibility and fallback text.
Q2
B — The alt value must be enclosed in double quotes: alt="Hero banner", not alt=Hero banner without quotes.
Q3
C — The alt attribute must be inside the <img> opening tag, not on a separate line. Write: <img src="sunset.jpg" alt="Sunset view">.
Q4
D — <image> is not a valid HTML element. The correct self-closing element for images is <img>.
Q5
E — The last <img> tag is missing the alt attribute. Every <img> must have alt="description" for accessibility.