What are attributes in HTML - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an attribute that sets the image source.

HTML

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

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

Atitle

Bhref

Calt

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of src for images

Confusing alt with src

The src attribute tells the browser where to find the image file.

2fill in blank

medium

Complete the code to add an attribute that sets the link destination.

HTML

<a [1]="https://example.com">Visit site</a>

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

Ahref

Balt

Csrc

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of href in links

Leaving out the attribute entirely

The href attribute defines the URL the link points to.

3fill in blank

hard

Fix the error by choosing the correct attribute to describe the image.

HTML

<img src="photo.jpg" [1]="A beautiful sunset">

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

Aalt

Bhref

Ctitle

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of alt for image description

Using src twice

The alt attribute provides alternative text for the image, important for accessibility.

4fill in blank

hard

Fill both blanks to add attributes that set the input type and placeholder text.

HTML

<input [1]="text" [2]="Enter your name">

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

Atype

Bvalue

Cplaceholder

Dalt

Attempts:

3 left

💡 Hint

Common Mistakes

Using value instead of placeholder for hint text

Confusing alt with placeholder

The type attribute defines the input field type, and placeholder shows a hint inside the input box.

5fill in blank

hard

Fill all three blanks to create a button with a type, id, and accessible label.

HTML

<button [1]="submit" [2]="sendBtn" aria-label="[3]">Send</button>

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

Atype

Bid

CSend button

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id for unique identification

Leaving out aria-label for accessibility

The type attribute defines the button's action, id uniquely identifies it, and aria-label improves accessibility by describing the button.