The HTML title attribute adds extra info to any element. You can use it to show tooltips on hover.
Table of Content
What Is the HTML title Attribute?
The title attribute adds short text to an element. That text shows when users hover with a mouse.
It helps people know what a link or icon does without clicking. You can use it with tags like <a>, <div>, or <span>.
Browsers show the title in a small popup. That popup appears when the mouse moves over the element. People call it a tooltip.
You do not need code to make tooltips work. Browsers show them by default. On phones, tooltips may not work because hover does not exist.
Tooltips appear above or below the element. The browser chooses the spot based on space. You cannot change how it looks or moves. CSS does not control it.
So, why use the title attribute in HTML?
- It gives fast hints without with extra space.
- It helps users avoid errors before clicking.
- It shows simple info on buttons, links, and icons.
- It explains terms without changing the layout.
How to Add the title Attribute
Add the title inside the open tag. Write the tooltip as text in quotes.
<a href="page.html" title="Go to the product page">Product</a>This shows “Go to the product page” when users hover.
You can add the attribute to many tags:
<img src="cat.jpg" title="Cute cat can play in the sun" />
<button title="Click to submit the form">Submit</button>Most elements accept this attribute. You can use it with:
- Links
- Images
- Buttons
- Input fields
- Divs
- Spans
- Titles
On input fields, the tooltip may show when focused or hovered. On phones, tooltips often do not show.
The Difference between <title> in <head> and title attribute.
The <title> tag sets the page name in the tab. The title attribute shows a tooltip on hover.
| Feature | <title> tag | title attribute |
|---|---|---|
| Location | Inside <head> | Inside HTML elements |
| Use | Sets page tab name | Shows hint on hover |
| User sees it | On the browser tab | On hover |
| Style | Not styleable | Not styleable |
| Use case | SEO, bookmarks, tabs | Help users with extra info |
Use <title> to name the page. Use title to show tips on icons, buttons, or links.
Examples
Link Tooltip:
<a href="help.html" title="Read the help guide before you go">Help</a>This gives a warning before clicking. It tells the user to read first.
Icon Explanation:
<span class="icon" title="Edit your profile info">✎</span>This icon shows a pencil. The tooltip tells the user it edits the profile.
Button With Caution Note:
<button title="Deletes your account forever. No undo.">Delete Account</button>This shows a strong warning. It helps the user avoid a mistake.
Complex Input Field:
<input type="text" name="ref" title="Type the code from the invite email" />This gives context. It shows what to type in the field.
Wrapping Up
The title attribute shows a tooltip when users hover. It works on most elements.
You saw how to add it and when to use it. You also learned how it differs from the <title> tag.
Here is a quick recap:
- Use
titleto add tooltips to tags. - Tooltips show on hover, not on mobile.
- Use
<title>for the page tab. - Tooltips help explain small actions.
FAQs
What does the title attribute do in HTML?
<p title="This is extra info">Hover here</p>How to use the HTML title attribute with links?
<a href="https://example.com" title="Go to Example">Visit</a>Where can I use the title attribute in HTML?
<img src="photo.jpg" title="A scenic photo" alt="Scenery">Is the title attribute good for SEO?
Similar Reads
Use the HTML object tag to embed different types of external files into your webpage. It works for videos and…
The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common…
The HTML small tag displays text in a smaller font size than nearby text. It shows less important or side…
The br tag adds a single line break in HTML. It is an empty tag that does not need a…
The HTML lang attribute tells browsers and tools what language the page uses. It helps users and search engines understand…
Text on a page often moves from left to right. Some languages move from right to left. HTML gives control…
The <wbr> tag in HTML helps the browser decide where it can break a word. It does not force a…
The <main> tag in HTML marks the central content of a webpage. It tells browsers and assistive technologies where the…
HTML syntax shows how tags and attributes go together. It gives browsers the rules to read and display a page.…
The HTML noscript tag tells the browser what to show when JavaScript does not run. This tag targets users who…
