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.