Image source and alt attribute in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an image with the correct source attribute.

HTML

<img src="[1]" alt="A beautiful sunrise">

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

Asunrise.jpg

Balt

Chref

Dimage.png

Attempts:

3 left

💡 Hint

Common Mistakes

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

Leaving the src attribute empty.

The src attribute specifies the path to the image file. Here, sunrise.jpg is the correct source.

2fill in blank

medium

Complete the code to add a meaningful alt text for the image.

HTML

<img src="flower.png" alt="[1]">

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

Aflower.png

Bimage

Csrc

DA red flower in bloom

Attempts:

3 left

💡 Hint

Common Mistakes

Using the image filename as alt text.

Leaving the alt attribute empty or missing.

The alt attribute provides descriptive text for the image, which helps screen readers and shows if the image cannot load. Here, A red flower in bloom is a meaningful description.

3fill in blank

hard

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

HTML

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

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

Aalt

Bsrc

Chref

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' instead of 'src' for images.

Confusing 'alt' with 'src'.

The src attribute is required to specify the image source. Without it, the image won't display.

4fill in blank

hard

Fill both blanks to create an image tag with a source and alt text.

HTML

<img [1]="cat.jpg" [2]="A cute cat sitting">

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

Asrc

Balt

Ctitle

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping 'src' and 'alt' attributes.

Using 'href' instead of 'src'.

The src attribute sets the image file path, and the alt attribute provides descriptive text for accessibility.

5fill in blank

hard

Fill all three blanks to create an image tag with source, alt text, and a title attribute.

HTML

<img [1]="dog.png" [2]="A happy dog" [3]="Dog photo">

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

Asrc

Balt

Ctitle

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' instead of 'src'.

Mixing up 'alt' and 'title' attributes.

The src attribute sets the image file, alt provides descriptive text for accessibility, and title shows a tooltip on hover.

Practice

1. What does the alt attribute in an <img> tag do?

easy

A. Provides a text description of the image for screen readers and when the image can't load

B. Specifies the URL of the image to display

C. Sets the size of the image on the page

D. Adds a border around the image

Solution

1. Step 1: Understand the purpose of the alt attribute

   The alt attribute provides alternative text describing the image content.

2. Step 2: Recognize its use for accessibility and fallback

   This text helps screen readers and shows if the image fails to load.

3. Final Answer:

   Provides a text description of the image for screen readers and when the image can't load -> Option A

4. Quick Check:

   alt describes image content [OK]

Hint: Alt text describes images for accessibility and fallback [OK]

Common Mistakes:

• Confusing alt with src attribute
• Thinking alt controls image size
• Using alt to add styling

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct tag and attributes

   The correct tag is <img> with attributes src and alt.

2. Step 2: Check attribute names and order

   <img src="photo.jpg" alt="A sunset"> uses correct attribute names and syntax: src="photo.jpg" and alt="A sunset".

3. Final Answer:

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

4. Quick Check:

   Correct tag and attributes = <img src="photo.jpg" alt="A sunset"> [OK]

Hint: Use <img> with src and alt attributes exactly named [OK]

Common Mistakes:

• Using <image> instead of <img>
• Using 'source' instead of 'src'
• Using 'description' instead of 'alt'

3. What will the browser display if this code is used and the image file "logo.png" is missing?

<img src="logo.png" alt="Company Logo">

medium

A. Nothing will show, just empty space

B. The browser will crash

C. An error message will pop up

D. The text "Company Logo" will appear instead of the image

Solution

1. Step 1: Understand what happens when image source is missing

   If the image file can't be found, the browser shows the alt text as a fallback.

2. Step 2: Identify the alt text in the code

   The alt text is "Company Logo", so this text will display in place of the missing image.

3. Final Answer:

   The text "Company Logo" will appear instead of the image -> Option D

4. Quick Check:

   Missing image shows alt text [OK]

Hint: Missing images show alt text in browser [OK]

Common Mistakes:

• Expecting no output or blank space
• Thinking browser shows error popups
• Assuming browser crashes

4. Find the error in this image tag:

<img src="picture.jpg" alt>

medium

A. The img tag should be closed with

B. The src attribute is misspelled

C. The alt attribute is missing a value

D. The alt attribute should be written as alt-text

Solution

1. Step 1: Check the alt attribute syntax

   The alt attribute is present but has no value assigned, which is invalid.

2. Step 2: Confirm correct attribute names and tag usage

   The src attribute is correct, and <img> is self-closing, so no closing tag needed.

3. Final Answer:

   The alt attribute is missing a value -> Option C

4. Quick Check:

   Alt attribute must have a value [OK]

Hint: Alt attribute always needs a descriptive value [OK]

Common Mistakes:

• Leaving alt attribute empty
• Adding closing tag
• Changing alt attribute name incorrectly

5. You want to add an image that shows a cat playing with a ball. Which is the best way to write the <img> tag for accessibility and SEO?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand the purpose of alt text for accessibility and SEO

   Alt text should clearly describe the image content to help screen readers and improve search engine understanding.

2. Step 2: Evaluate the options for descriptive quality

   <img src="cat-ball.jpg" alt="Cat playing with a ball"> describes the image specifically as "Cat playing with a ball", which is clear and meaningful.

3. Final Answer:

   <img src="cat-ball.jpg" alt="Cat playing with a ball"> -> Option B

4. Quick Check:

   Descriptive alt text improves accessibility and SEO [OK]

Hint: Use clear, specific alt text describing the image content [OK]

Common Mistakes:

• Using vague alt text like 'image' or 'cute'
• Omitting alt attribute entirely
• Using unrelated or too short alt text