Title attribute in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the title attribute do in HTML?

Choose the correct description of the title attribute's purpose in HTML elements.

A It adds a clickable link to the element.

B It changes the font size of the element's text.

C It defines the main heading of the webpage.

D It provides extra information shown as a tooltip when the user hovers over the element.

💡 Hint

Think about what happens when you move your mouse over a word or image on a webpage.

The title attribute adds a small popup text (tooltip) that appears when the mouse pointer hovers over the element. It does not affect styling or linking.

📝 Syntax

intermediate

Identify the correct use of the title attribute in this HTML snippet.

Which option correctly adds a title attribute to the <img> tag to show 'Cute kitten' on hover?

HTML

<img src="kitten.jpg" alt="Kitten">

A <img src="kitten.jpg" alt="Kitten" tooltip="Cute kitten">

B <img src="kitten.jpg" alt="Kitten" title="Cute kitten">

C <img src="kitten.jpg" alt="Kitten" hover="Cute kitten">

D <img src="kitten.jpg" alt="Kitten" title=''>

💡 Hint

The attribute name is exactly 'title' and the value is inside quotes.

Only option B uses the correct attribute name 'title' with the meaningful string 'Cute kitten'. Option B has an empty value, and B and C use invalid attribute names.

❓ rendering

advanced

What is the visible effect of this HTML code in a browser?

Given the code below, what will the user see when they hover the mouse over the word 'Hello'?

HTML

<p title="Greeting message">Hello</p>

A A small popup tooltip showing 'Greeting message' appears on hover.

B Nothing happens when hovering over 'Hello'.

C The word 'Hello' changes color on hover.

D The text 'Greeting message' replaces 'Hello' on hover.

💡 Hint

The title attribute triggers a tooltip on hover.

The title attribute causes a tooltip with its value to appear when the user hovers over the element.

❓ accessibility

advanced

How does the title attribute affect accessibility?

Which statement about the title attribute and screen readers is true?

A Some screen readers may read the <code>title</code> attribute, but it should not replace proper labels.

B Screen readers never read the <code>title</code> attribute, so it has no accessibility impact.

C Screen readers always read the <code>title</code> attribute aloud when focusing on the element.

D The <code>title</code> attribute automatically improves keyboard navigation.

💡 Hint

Think about how screen readers handle extra info and the importance of clear labels.

The title attribute can be read by some screen readers but is inconsistent. It should not replace clear, visible labels for accessibility.

❓ selector

expert

Which CSS selector targets all elements with a non-empty title attribute?

Choose the CSS selector that selects only elements that have a title attribute with at least one character.

A [title]

B [title=""]

C [title]:not([title=""])

D :has([title])

💡 Hint

Think about how to exclude empty attribute values using CSS selectors.

Option C selects elements with a title attribute that is not empty. Option C selects all with title, including empty. Option C selects only empty titles. Option C is invalid CSS syntax.

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