0
0
HTMLmarkup~5 mins

Title attribute in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.