Title attribute in HTML

Introduction

The title attribute shows extra information when you hover over an element. It helps users understand things better.

To explain a button's purpose when it's not clear from the text

To give more details about a link destination before clicking

To add helpful tips on images or icons

To provide extra info on form fields for better user guidance

To improve accessibility by giving context to elements

Syntax

HTML

<element title="Your extra info here">Content</element>

The title attribute can be added to most HTML elements.

The text inside title appears as a small popup when you hover the mouse over the element.

Examples

A button with a title that explains what it does.

HTML

<button title="Click to submit the form">Submit</button>

A link with a title describing where it leads.

HTML

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

An image with a title giving extra info about the picture.

HTML

<img src="logo.png" alt="Company logo" title="Our company logo">

Sample Program

This page shows how the title attribute works on different elements. When you move your mouse over the heading, bold text, or button, a small tooltip appears with extra info.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title Attribute Example</title>
</head>
<body>
  <h1 title="Welcome to our website!">Home Page</h1>
  <p>Hover over the <strong title="This is important text">bold text</strong> to see the title.</p>
  <button title="Click to send your message">Send</button>
</body>
</html>

Important Notes

The title tooltip depends on the browser and may look different on each one.

Screen readers may read the title attribute, but it's best to use it with other accessibility features like aria-label.

Don't rely only on the title attribute for important information because it's not always visible on touch devices.

Summary

The title attribute adds helpful hover text to elements.

It improves user understanding and accessibility.

Use it to give extra info without cluttering the page.

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