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.