Image tag usage in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the alt attribute in an tag?

Why should you always include the alt attribute in an <img> tag?

A It adds a border around the image for styling purposes.

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

C It links the image to another webpage when clicked.

D It changes the image size automatically based on screen width.

💡 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 cannot load.

📝 Syntax

intermediate

Which tag is correctly written to display an image?

Choose the correct <img> tag syntax that will display an image located at "images/photo.jpg" with alt text "A photo".

A <img src="images/photo.jpg" alt="A photo">

B <img href="images/photo.jpg" alt="A photo">

C <img src="images/photo.jpg" alt=>

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

💡 Hint

Remember the attribute that specifies the image file location is src.

The src attribute points to the image file. The alt attribute must have a value describing the image.

❓ rendering

advanced

What will the browser display for this image tag?

Given this HTML code:

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

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

A The browser will display a broken image icon with no text.

B Nothing will be shown; the image area will be blank.

C The browser will crash or freeze.

D The text "Missing image" will be shown where the image should be.

💡 Hint

Think about what the alt text is for when the image cannot load.

If the image file is missing, the browser shows the alt text so users understand what was meant to be there.

❓ selector

advanced

Which CSS selector targets all images inside a

element?

You want to style all <img> tags that are inside any <section> element. Which CSS selector should you use?

A section img

B img > section

C section > img

D img.section

💡 Hint

Think about how to select elements nested inside another element.

The selector section img selects all img elements inside any section, at any depth.

❓ accessibility

expert

Which practice improves accessibility for decorative images?

You have an image used only for decoration and it adds no information. How should you write the <img> tag to improve accessibility?

A <img src="decorative.png" aria-hidden="false">

B <img src="decorative.png">

C <img src="decorative.png" alt="">

D <img src="decorative.png" alt="decorative image">

💡 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 purely decorative images.