Image tag usage in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an image with the source 'flower.jpg'.

HTML

<img src="[1]" alt="A flower">

Drag options to blanks, or click blank then click option'

Aflower.png

Bflower.gif

Cflower.jpg

Dflower.svg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file extension in the src attribute.

Forgetting to include the alt attribute for accessibility.

The src attribute specifies the image file. Here, it should be 'flower.jpg' to match the file name.

2fill in blank

medium

Complete the code to add alternative text describing the image as 'Sunset view'.

HTML

<img src="sunset.jpg" alt="[1]">

Drag options to blanks, or click blank then click option'

ASunset view

BA sunset

CSunset photo

DView of sunset

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague or unrelated alt text.

Leaving the alt attribute empty.

The alt attribute should describe the image clearly. 'Sunset view' matches the instruction exactly.

3fill in blank

hard

Fix the error in the image tag by completing the missing attribute name.

HTML

<img [1]="logo.png" alt="Company logo">

Drag options to blanks, or click blank then click option'

Asrc

Btitle

Calt

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' instead of 'src' in the image tag.

Omitting the src attribute entirely.

The src attribute is required to specify the image source. 'href' is for links, 'alt' is for alternative text, and 'title' shows a tooltip.

4fill in blank

hard

Fill both blanks to create an image tag with source 'cat.png' and alternative text 'Cute cat'.

HTML

<img [1]="[2]" alt="Cute cat">

Drag options to blanks, or click blank then click option'

Asrc

Bcat.png

Chref

Dalt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' instead of 'src' for the image source.

Putting the alt text in the src attribute.

The src attribute sets the image file, and the value should be 'cat.png'. The alt text is already correct.

5fill in blank

hard

Fill all three blanks to create an image tag with source 'dog.jpg', alternative text 'Happy dog', and a width of 300 pixels.

HTML

<img [1]="[2]" alt="[3]" width="300">

Drag options to blanks, or click blank then click option'

Asrc

Bdog.jpg

CHappy dog

Dalt

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the alt attribute name and value.

Forgetting to include the alt attribute for accessibility.

The src attribute points to 'dog.jpg', the alt attribute describes the image as 'Happy dog', and the width is set to 300 pixels.

Practice

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

easy

A. To style the webpage

B. To create links to other pages

C. To add text content

D. To display images on a webpage

Solution

1. Step 1: Understand the role of the <img> tag

   The <img> tag is specifically designed to add pictures to a webpage.

2. Step 2: Compare with other options

   Other tags like <a> create links, <p> add text, and CSS styles the page, so they are not correct here.

3. Final Answer:

   To display images on a webpage -> Option D

4. Quick Check:

   <img> tag = display images [OK]

Hint: Remember: <img> always shows pictures [OK]

Common Mistakes:

• Confusing <img> with <a> for links
• Thinking <img> adds text
• Assuming <img> styles content

2. Which of the following is the correct syntax to add an image with source "photo.jpg" and alternative text "A photo"?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check the tag and attributes

   The correct tag is <img> with attributes src for source and alt for alternative text.

2. Step 2: Identify incorrect attributes or tags

   <image> is not a valid tag, href is for links, and title is not the alt text.

3. Final Answer:

   <img src="photo.jpg" alt="A photo"> -> Option A

4. Quick Check:

   Use src and alt in <img> [OK]

Hint: Use src for image path and alt for description [OK]

Common Mistakes:

• Using <image> instead of <img>
• Using href instead of src
• Confusing alt with title attribute

3. What will the browser display when rendering this HTML?

<img src="flower.png" alt="A red flower">

medium

A. The text 'A red flower' instead of an image

B. Nothing, because alt text is missing

C. The image file named flower.png if it exists, otherwise a broken image icon

D. An error message on the page

Solution

1. Step 1: Understand how the browser uses src and alt

   The browser tries to load the image from the src path. If it succeeds, it shows the image.

2. Step 2: Role of alt attribute

   If the image cannot load, the alt text is shown as a fallback. No error message appears on the page.

3. Final Answer:

   The image file named flower.png if it exists, otherwise a broken image icon -> Option C

4. Quick Check:

   Image shows if src works, alt shows if not [OK]

Hint: Image shows if src valid; alt shows if image missing [OK]

Common Mistakes:

• Thinking alt text always shows instead of image
• Expecting error messages on page
• Assuming missing alt means no display

4. Identify the error in this image tag:

<img src='cat.jpg' alt=Cat Picture>

medium

A. Incorrect tag name, should be <image>

B. Missing quotes around the alt attribute value

C. src attribute should be alt

D. alt attribute is not needed

Solution

1. Step 1: Check attribute syntax

   HTML attributes with spaces in values must be quoted. alt=Cat Picture lacks quotes around 'Cat Picture'.

2. Step 2: Verify tag and attributes

   The tag <img> is correct, src is correct, and alt is needed for accessibility.

3. Final Answer:

   Missing quotes around the alt attribute value -> Option B

4. Quick Check:

   Attribute values with spaces need quotes [OK]

Hint: Always quote attribute values with spaces [OK]

Common Mistakes:

• Leaving out quotes for multi-word alt text
• Using <image> instead of <img>
• Removing alt attribute entirely

5. You want to add an image that is decorative only and should be ignored by screen readers. Which is the best way to write the <img> tag?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand accessibility for decorative images

   Decorative images should have an empty alt attribute (alt="") so screen readers skip them.

2. Step 2: Analyze other options

   Omitting alt means screen readers may read the file name; descriptive alt text is for meaningful images; aria-hidden="false" means not hidden.

3. Final Answer:

   <img src="decorative.png" alt=""> -> Option A

4. Quick Check:

   Empty alt hides decorative images from screen readers [OK]

Hint: Use alt="" for decorative images to hide from screen readers [OK]

Common Mistakes:

• Omitting alt attribute entirely
• Adding descriptive alt for decorative images
• Using aria-hidden="false" instead of true