Image source and alt attribute in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the src attribute in an <img> tag specify?

The src attribute tells the browser the location (URL or path) of the image file to display.

beginner

Why is the alt attribute important for images?

The alt attribute provides alternative text describing the image. It helps screen readers for visually impaired users and shows text if the image fails to load.

beginner

Write a simple <img> tag with a source of "cat.jpg" and alt text "A cute cat".

<img src="cat.jpg" alt="A cute cat">

beginner

What happens if an image's src is incorrect or the image file is missing?

The browser shows the alt text instead of the image, helping users understand what was supposed to be there.

intermediate

Can the alt attribute be empty? When would you do this?

Yes, alt="" means the image is decorative and screen readers will skip it. Use this for images that don’t add important info.

What does the src attribute in an <img> tag do?

A Provides alternative text

B Specifies the image file location

C Sets the image size

D Defines the image border

The src attribute tells the browser where to find the image file to display.

Why should you always include an alt attribute in images?

A To add a border around the image

B To improve page loading speed

C To describe the image for screen readers and when images fail to load

D To change the image color

The alt attribute helps users who can’t see the image understand its content.

What will a browser show if the image file in src is missing?

A Nothing at all

B A broken image icon only

C The page will crash

D The <code>alt</code> text

If the image can’t load, the browser displays the alt text to explain what was missing.

How do you mark an image as decorative so screen readers ignore it?

A Set <code>alt=""</code> (empty string)

B Use <code>src="decorative.jpg"</code>

C Use <code>alt="decorative"</code>

D Omit the <code>alt</code> attribute

An empty alt attribute tells screen readers to skip the image because it’s only decorative.

Which of these is a correct <img> tag?

A &lt;img src="sunset.jpg" alt="Sunset"&gt;

B &lt;img alt="Sunset"&gt;

C &lt;img src="sunset.jpg"&gt;

D &lt;img source="sunset.jpg" alt="Sunset"&gt;

The correct attributes are src for the image file and alt for alternative text.

Explain why the alt attribute is important for web images.

Think about users who cannot see images.

Describe how to write an <img> tag with both source and alt text.

Remember both attributes are needed for good practice.