Title attribute in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a tooltip text to the link using the title attribute.

HTML

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

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

Aalt="Go to example website"

Bhover="Go to example website"

Ctooltip="Go to example website"

Dtitle="Go to example website"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt' attribute which is for images, not links.

Using 'tooltip' or 'hover' which are not valid HTML attributes.

The title attribute adds a tooltip text that appears when the mouse hovers over the element.

2fill in blank

medium

Complete the code to add a title attribute to the button that says 'Click me to submit'.

HTML

<button [1]>Submit</button>

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

Atitle="Click me to submit"

Blabel="Click me to submit"

Calt="Click me to submit"

Ddesc="Click me to submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt' attribute on buttons which does nothing.

Using 'label' or 'desc' which are not valid HTML attributes.

The title attribute provides additional information shown as a tooltip on hover.

3fill in blank

hard

Fix the error in the code by completing the title attribute correctly.

HTML

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

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

Atitle='Click here

Btitle="Click here"

Ctitle=Click here

Dtitle= 'Click here'

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around the attribute value causes invalid HTML.

Using mismatched or incomplete quotes.

Attribute values must be enclosed in matching quotes, either double or single quotes.

4fill in blank

hard

Fill both blanks to add a title attribute with the text 'Profile page' to the link and make it open in a new tab.

HTML

<a href="profile.html" [1] [2]>My Profile</a>

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

Atitle="Profile page"

Btarget="_blank"

Calt="Profile page"

Drel="noopener noreferrer"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt' instead of 'title' for tooltip.

Forgetting to add target='_blank' to open in new tab.

The title attribute adds tooltip text. The target="_blank" opens the link in a new tab.

5fill in blank

hard

Fill all three blanks to add a title attribute with 'Home page', open the link in a new tab, and add safe link behavior.

HTML

<a href="index.html" [1] [2] [3]>Home</a>

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

Atitle="Home page"

Btarget="_blank"

Crel="noopener noreferrer"

Dalt="Home page"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the 'rel' attribute causes security risks.

Using 'alt' instead of 'title' for tooltip.

Use title for tooltip, target="_blank" to open new tab, and rel="noopener noreferrer" for security.