Attribute best practices in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

HTML

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

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

A"flower.jpg"

Bflower

Cimage

D"A beautiful red flower"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving alt empty or missing

Using the image filename as alt text

Using non-descriptive words like 'image' or 'flower'

The alt attribute should describe the image content for screen readers. It needs to be a descriptive text in quotes.

2fill in blank

medium

Complete the code to make the link open in a new tab safely.

HTML

<a href="https://example.com" target=[1] rel="noopener noreferrer">Visit</a>

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

A"_self"

B"_blank"

C"_parent"

D"_top"

Attempts:

3 left

💡 Hint

Common Mistakes

Using target="_self" which opens in the same tab

Forgetting rel="noopener noreferrer" causing security risks

Using invalid target values

The target="_blank" attribute opens the link in a new tab. The rel="noopener noreferrer" improves security and performance.

3fill in blank

hard

Fix the error by completing the code to correctly label the input for accessibility.

HTML

<label for=[1]>Name:</label>
<input type="text" id="name" name="name">

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

A"name"

B"username"

C"inputName"

D"user"

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching label for and input id

Using different or missing ids

Not using a label at all

The for attribute in the label must match the id of the input it labels. Here, both should be "name".

4fill in blank

hard

Fill both blanks to create a button that is disabled and has an accessible label.

HTML

<button type=[1] disabled=[2] aria-label="Submit form">Send</button>

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

A"submit"

B"button"

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using type="button" which does not submit forms

Setting disabled to false when intending to disable

Missing aria-label for accessibility

The button type should be "submit" to send form data. The disabled attribute is set to true to disable the button. The aria-label helps screen readers understand the button's purpose.

5fill in blank

hard

Fill all three blanks to create an input with a placeholder, required attribute, and a descriptive aria-label.

HTML

<input type=[1] placeholder=[2] required=[3] aria-label="Enter your email address">

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

A"text"

B"email"

C"Enter your email"

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using type="text" instead of "email"

Omitting the required attribute

Not providing an aria-label for accessibility

The input type should be "email" to validate email addresses. The placeholder shows example text inside the input. The required attribute set to true makes the field mandatory. The aria-label describes the input for screen readers.