Image tag usage in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <img> tag in HTML?

The <img> tag is used to embed images in a web page. It displays pictures like photos, icons, or graphics.

beginner

Which attribute of the <img> tag specifies the image file to display?

The src attribute tells the browser the path or URL of the image file to show.

beginner

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

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

Can the <img> tag have a closing tag like </img>?

No, the <img> tag is self-closing. It does not have a separate closing tag. You write it as <img src="image.jpg" alt="desc">.

intermediate

How can you make an image responsive so it adjusts to different screen sizes?

Use CSS styles like max-width: 100%; and height: auto; on the image. This makes the image shrink or grow to fit the container without distortion.

Which attribute is required to display an image in HTML?

A alt

B src

C title

D href

The src attribute specifies the image file location and is required for the image to show.

What happens if the alt attribute is missing and the image fails to load?

A Nothing is shown

B The browser shows the image file name

C Screen readers cannot describe the image

D The page crashes

Without alt, screen readers have no text to describe the image, hurting accessibility.

How do you write a self-closing <img> tag correctly?

A <img src="pic.jpg"></img>

B <img src="pic.jpg" />

C <img src="pic.jpg">

D Both B and C

In HTML5, <img> can be written as <img src="pic.jpg"> or self-closed as <img src="pic.jpg" />.

Which CSS style helps make images responsive?

A max-width: 100%; height: auto;

B position: absolute;

C float: left;

D width: 500px;

Using max-width: 100% and height: auto lets images scale with their container size.

What is the best practice for the alt attribute?

A Write a short descriptive text

B Leave it empty if image is decorative

C Use the image file name

D Omit it always

The alt attribute should describe the image content briefly for accessibility.

Explain how to use the <img> tag to add an image to a webpage, including important attributes.

Think about what the browser needs to find and describe the image.

Describe why accessibility matters when using images on websites and how the alt attribute helps.

Consider users who cannot see images.