Image source and alt attribute in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of the alt attribute

Why is the alt attribute important for an <img> tag in HTML?

A It provides alternative text for screen readers and shows if the image fails to load.

B It sets the image size automatically based on the text length.

C It links the image to another webpage when clicked.

D It changes the image format from PNG to JPEG.

💡 Hint

Think about accessibility and what happens if the image cannot be displayed.

The alt attribute describes the image for people using screen readers and shows text if the image doesn't load.

📝 Syntax

intermediate

Correct syntax for image source and alt

Which of the following <img> tags is correctly written with both src and alt attributes?

A <img src="photo.jpg" alt="A beautiful sunrise">

B <img alt="A beautiful sunrise" source="photo.jpg">

C <img src=photo.jpg alt=>

D <img src="photo.jpg" alt>

💡 Hint

Check attribute names and if values are properly quoted.

Option A uses correct attribute names and quotes values properly. Others have wrong attribute names or missing values.

❓ rendering

advanced

What is displayed if image source is broken?

Given this HTML code:

<img src="missing.jpg" alt="Logo image">

What will the browser show if missing.jpg does not exist?

A The browser will crash with an error.

B Nothing will appear; the image area will be empty.

C The text 'Logo image' will be shown where the image should be.

D A broken image icon with no text will appear.

💡 Hint

Think about fallback content for images that fail to load.

Browsers display the alt text if the image cannot load, helping users understand what was meant to be shown.

❓ selector

advanced

Selecting images with missing alt attributes using CSS

Which CSS selector targets all <img> elements that do NOT have an alt attribute?

A img:empty

B img[alt='']

C img[alt]

D img:not([alt])

💡 Hint

Look for a selector that matches elements missing a specific attribute.

The selector img:not([alt]) matches images without the alt attribute. Option D matches images with empty alt, C matches images with alt, D matches empty elements.

❓ accessibility

expert

Best practice for decorative images and alt attribute

For purely decorative images that add no information, what is the best way to use the alt attribute to keep the page accessible?

A Write <code>alt="decorative image"</code> to describe it.

B Set <code>alt=""</code> (empty string) to hide it from screen readers.

C Omit the <code>alt</code> attribute entirely.

D Use <code>alt="image"</code> as a generic description.

💡 Hint

Think about how screen readers treat empty alt attributes.

An empty alt attribute tells screen readers to ignore the image, which is best for decorative images. Omitting alt causes screen readers to read the file name, which is confusing.