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.

Practice

1. What does the title attribute do in HTML?

easy

A. Changes the font size of the element

B. Shows extra text when you hover over an element

C. Adds a clickable link to the element

D. Makes the element invisible

Solution

1. Step 1: Understand the purpose of the title attribute

   The title attribute is used to provide additional information about an element, which appears as a tooltip when the mouse hovers over it.

2. Step 2: Compare options with the attribute's function

   Only Shows extra text when you hover over an element describes showing extra text on hover, which matches the title attribute's behavior.

3. Final Answer:

   Shows extra text when you hover over an element -> Option B

4. Quick Check:

   title attribute = hover text [OK]

Hint: Hover over elements to see title text in browser [OK]

Common Mistakes:

• Thinking title changes style or visibility
• Confusing title with link or font attributes
• Assuming title is always visible without hover

2. Which of the following is the correct way to add a title attribute to a paragraph?

easy

A. <p title='This is a paragraph'>Hello</p>

B. <p 'This is a paragraph' title>Hello</p>

C. <p title=Hello>This is a paragraph</p>

D. <p title=>This is a paragraph</p>

Solution

1. Step 1: Check correct syntax for title attribute

   The title attribute must be inside the opening tag with an equals sign and quoted text, like title='text'.

2. Step 2: Evaluate each option's syntax

   <p title='This is a paragraph'>Hello</p> uses correct syntax: title='This is a paragraph'. Options B, C, and D have syntax errors or missing quotes.

3. Final Answer:

   <p title='This is a paragraph'>Hello</p> -> Option A

4. Quick Check:

   Attribute syntax = name='value' [OK]

Hint: Always quote attribute values in HTML [OK]

Common Mistakes:

• Missing quotes around attribute value
• Placing attribute value before attribute name
• Leaving attribute value empty without quotes

3. What will the user see when they hover over this link?

<a href='https://example.com' title='Go to example'>Example</a>

medium

A. The link opens automatically

B. The link text changes to 'Go to example'

C. The text 'Go to example' appears as a tooltip

D. Nothing happens on hover

Solution

1. Step 1: Understand the title attribute on a link

   The title attribute on an anchor tag shows a tooltip with the given text when hovered.

2. Step 2: Predict the hover behavior

   Hovering over the link will show the tooltip 'Go to example' as specified in the title attribute.

3. Final Answer:

   The text 'Go to example' appears as a tooltip -> Option C

4. Quick Check:

   title attribute = tooltip text on hover [OK]

Hint: Hover over links to see title tooltips in browser [OK]

Common Mistakes:

• Expecting link text to change on hover
• Thinking title triggers automatic navigation
• Ignoring the tooltip display on hover

4. Find the error in this code snippet:

<button title=Click me>Press</button>

medium

A. The title attribute should be after the button text

B. Button tag cannot have a title attribute

C. The text 'Press' should be inside quotes

D. Missing quotes around the title value

Solution

1. Step 1: Check attribute syntax rules

   HTML attributes must have their values in quotes if they contain spaces.

2. Step 2: Identify the problem in the code

   The title value 'Click me' has a space but is not quoted, causing invalid HTML.

3. Final Answer:

   Missing quotes around the title value -> Option D

4. Quick Check:

   Attribute values with spaces need quotes [OK]

Hint: Quote attribute values with spaces to avoid errors [OK]

Common Mistakes:

• Leaving attribute values unquoted with spaces
• Thinking title attribute is invalid on buttons
• Placing attributes after element content

5. You want to add a title attribute to an image that says 'Company Logo'. Which is the best way to do this while keeping the page accessible?

hard

A. <img src='logo.png' alt='Company Logo' title='Company Logo'>

B. <img src='logo.png' title='Company Logo'>

C. <img src='logo.png' alt='' title='Company Logo'>

D. <img src='logo.png' alt='Logo'>

Solution

1. Step 1: Understand accessibility for images

   The alt attribute provides text for screen readers and must describe the image meaningfully.

2. Step 2: Use title for extra info without replacing alt

   The title attribute adds hover text but does not replace the need for a descriptive alt.

3. Step 3: Evaluate options

   <img src='logo.png' alt='Company Logo' title='Company Logo'> has both descriptive alt and matching title, which is best for accessibility and user info.

4. Final Answer:

   <img src='logo.png' alt='Company Logo' title='Company Logo'> -> Option A

5. Quick Check:

   Use alt for screen readers + title for hover text [OK]

Hint: Always use alt for accessibility, title for extra hover info [OK]

Common Mistakes:

• Omitting alt attribute or leaving it empty
• Using title instead of alt for screen readers
• Using vague alt text that doesn't describe image