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.