Image alt text and optimization in SEO Fundamentals - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add alternative text to an image for accessibility.

SEO Fundamentals

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

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

AA beautiful sunrise over mountains

Bimage

Cphoto.jpg

Dpicture

Attempts:

3 left

💡 Hint

Common Mistakes

Using the image file name as alt text.

Leaving alt text empty or generic.

The alt attribute should describe the image content clearly for screen readers and SEO.

2fill in blank

medium

Complete the code to optimize image loading by specifying the image width.

SEO Fundamentals

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

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

Awidth

Bheight

Csize

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' instead of 'width' when only width is needed.

Using non-standard attributes like 'size' or 'length'.

Setting the width attribute helps browsers allocate space and improve page layout stability.

3fill in blank

hard

Fix the error in the alt attribute to improve SEO and accessibility.

SEO Fundamentals

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

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

AChart

Bchart.png

Cimage

DGraph showing sales data

Attempts:

3 left

💡 Hint

Common Mistakes

Using the file name as alt text.

Using single words like 'Chart' or 'image' that lack detail.

Descriptive alt text like 'Graph showing sales data' helps users understand the image content and improves SEO.

4fill in blank

hard

Fill both blanks to create a responsive image with alt text and lazy loading.

SEO Fundamentals

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

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

AA scenic beach at sunset

Bloading="lazy"

Cwidth="100%"

Dalt="banner"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt="banner"' again inside the tag which duplicates alt attribute.

Using width attribute instead of lazy loading for optimization.

The alt text describes the image, and loading="lazy" defers loading the image until needed, improving page speed.

5fill in blank

hard

Fill all three blanks to create an optimized image tag with alt text, width, and lazy loading.

SEO Fundamentals

<img src="profile.jpg" alt="[1]" [2]="150" [3]>

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

AUser profile photo

Bwidth

Cloading="lazy"

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width for size control.

Omitting lazy loading attribute.

This tag includes descriptive alt text, sets the image width to 150 pixels, and uses lazy loading to improve page performance.