Title attribute in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the title attribute in HTML?

The title attribute provides additional information about an element. When a user hovers over the element, a small tooltip with this information appears.

beginner

Which HTML elements can have a title attribute?

Almost all HTML elements can have a title attribute, including <a>, <img>, <button>, and <div>.

intermediate

How does the title attribute improve accessibility?

Screen readers can read the title attribute to provide extra context to users who rely on audio, helping them understand the purpose of elements better.

beginner

Example: What will the user see when hovering over this link?

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

When the user moves the mouse over the link text "Example," a small tooltip will appear showing the text "Go to example website."

intermediate

True or False: The title attribute should be used as the only way to provide important information.

False. The title attribute is helpful but should not be the only way to convey important information because some users may not see or hear it.

What happens when you add a title attribute to an HTML element?

A The element becomes clickable

B A tooltip appears when hovering over the element

C The element changes color

D The element disappears

The title attribute shows a small tooltip with extra information when the user hovers over the element.

Which of these is a good use of the title attribute?

A Adding a background image

B Changing the font size

C Adding extra description to a link

D Making text bold

The title attribute is used to add extra description or information, like for links.

Can the title attribute be used on an <img> tag?

A Yes, to provide extra info about the image

B No, it only works on links

C No, it only works on buttons

D Yes, but it hides the image

The title attribute can be used on images to give extra information shown as a tooltip.

Why should the title attribute not be the only way to give important info?

A Because some users may not see or hear tooltips

B Because it slows down the website

C Because it changes the page layout

D Because it disables keyboard navigation

Not all users can see or hear tooltips, so important info should also be visible or accessible in other ways.

What accessibility benefit does the title attribute provide?

A It makes text larger

B It changes colors for colorblind users

C It adds keyboard shortcuts

D Screen readers can read it to explain elements

Screen readers can read the title attribute to help users understand the element better.

Explain what the title attribute does in HTML and give an example of how it is used.

Think about what happens when you move your mouse over a link or image.

Describe why the title attribute is helpful for accessibility and what its limitations are.

Consider users who rely on audio or keyboard navigation.

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