- <hr> tag
- <nav> tag
- <pre> tag
- <td> tag
- <th> tag
- <tr> tag
- Anchor tag
- Article tag
- Attributes
- Audio tag
- Blink tag
- Block elements
- Blockquote
- Bold
- Buttons
- Canvas element
- Center text
- Checkbox
- Comment
- Data attribute
- datalist tag
- Div
- Doctype
- Entities
- Figure tag
- Font color
- Font size
- Footer
- Form
- Global attributes
- Header tag
- iFrame
- Images
- Inline elements
- Inline style attribute
- Input element
- Italic
- Label
- Lang attribute
- Line break
- Linking local webpages
- Links
- Marquee tag
- Metadata
- Ordered lists
- Paragraph tag
- Radio button
- Script tag
- section tag
- Select
- Semantic elements
- Space
- Span tag
- Strikethrough
- Style tag
- Subscript
- Superscript
- Table
- Textarea
- Title attribute
- Title tag
- Tooltip
- Underline
- Unordered lists
- Video tag
- What is HTML?
HTML
HTML Title Attribute: Syntax, Usage, and Examples
The HTML title attribute adds extra information to an element, and browsers commonly show it as a small tooltip when someone hovers. You can use it to add short, helpful context without changing the visible text.
How to Use the Title Attribute
The title attribute is a global attribute, which means you can add it to most HTML elements. You write it inside the opening tag as title="...".
Learn HTML on Mimo
<ahref="/pricing"title="See plans and billing options">Pricing</a>
The value should be plain text. Browsers typically display it as a tooltip on mouse hover, and some assistive technologies may announce it, but support varies.
Here’s the basic pattern:
<elementtitle="Helpful text here">...</element>
A few practical rules:
- Keep it short. Tooltips are small and easy to skim.
- Write it like a tiny label, not like a paragraph.
- Don’t rely on it as the only way to explain something important, because touch devices and screen readers may not surface it the same way.
Title attribute vs. the <title> element
The names look similar, but they live in different places and do different jobs:
- The
<title>element goes in<head>and sets the page title shown in browser tabs. - The
titleattribute goes on an element in the page content and adds extra context for that specific element.
<head>
<title>Accessible Links: Syntax, Usage, and Examples</title>
</head>
<body>
<ahref="/docs"title="Read the full documentation">Docs</a>
</body>
Same word, different tool.
When to Use the Title Attribute
The title attribute can be useful, but it’s easy to misuse. These are common cases where it actually helps.
Add a quick explanation for an icon-only control
Icon buttons can be confusing without a label. A title can add a hint for mouse users.
<buttontitle="Close">
✕
</button>
This is most helpful on desktop. On mobile, hover doesn’t exist, so you should still add a visible label or an accessible name (more on that later).
Clarify meaning when text is shortened
UI designs often use abbreviations to save space. A title can expand the meaning without stretching the layout.
<spantitle="Estimated time of arrival">ETA</span
Provide extra context for a link
Links like “Read more” don’t tell you much by themselves. A title can add detail, especially in lists of similar links.
<ahref="/blog/css-grid"title="Read the CSS Grid guide">Read more</a>
A stronger fix is to make the visible link text descriptive, but the title attribute can still help in some layouts.
Explain form input expectations
A title can hint what a field expects, especially when the placeholder text is already used for something else.
<inputtype="text"name="coupon"title="Enter a code like SAVE10" />
Still, don’t depend on it alone. Many users won’t hover, and many won’t notice.
Examples of the Title Attribute
Here are a few practical examples that show how the title attribute behaves in real pages.
1) Title attribute on a link
<ahref="/support"title="Contact support and open a ticket">Support</a>
On desktop, hovering typically shows a tooltip. The link text stays “Support,” but the user gets a bit more detail.
2) Title attribute on an image
When an image is purely decorative, you usually avoid extra text. When an image represents a thing that needs a label, you should focus on alt first. The title attribute can still be used for an extra hint, but don’t treat it as a replacement for alt.
<imgsrc="ava.png"alt="Ava smiling"title="Team member: Ava" />
If the image fails to load, browsers show alt, not title. That’s one reason alt matters more.
3) Title attribute on an abbreviation
<abbrtitle="Cascading Style Sheets">CSS</abbr>
This is a classic use case. The <abbr> element plus a title is a clean combo for showing expanded meaning.
4) Title attribute on a disabled button
A disabled control often needs an explanation. A title can add a quick reason.
<buttondisabledtitle="Add an address before checking out">Checkout</button>
This can reduce confusion, but it won’t reach every user. Consider showing a visible message near the button too.
5) Title attribute on a table cell
Sometimes you want to show a short label in a tight table, with more context on hover.
<tdtitle="Paid on January 3, 2026">Paid</td>
Good for desktop dashboards. Less helpful on mobile.
Learn More About the Title Attribute
Accessibility notes you should know
The title attribute is not a reliable accessibility tool by itself. Some screen readers announce it in certain situations, others ignore it, and behavior can differ based on browser and settings. Mouse hover tooltips also don’t work well on touch screens.
If the goal is accessibility, focus on these first:
- Visible text labels whenever you can
aria-labeloraria-labelledbyfor controls that lack textaltfor images
Here’s an icon-only button done in a more accessible way:
<buttonaria-label="Close"title="Close">
✕
</button>
The aria-label gives assistive tech a stable name. The title still helps mouse users.
Title attribute vs. placeholder text
Placeholders disappear when someone types, and they often look like “already filled” content. A title tooltip might sound like a better hint, but it’s hidden behind hover.
A better pattern for most forms is a visible label plus optional helper text:
<labelfor="coupon">Coupon code</label>
<inputid="coupon"name="coupon"type="text" />
<pid="coupon-help">Example: SAVE10</p>
If you still want a tooltip, you can add a title attribute, but don’t make it carry the main message.
Title attribute vs. the alt attribute
These are often confused, especially on images:
altis meant to describe the image content for users who can’t see it or when the image fails.titleis an optional tooltip-style hint.
For images, alt is the primary tool. The title attribute is extra seasoning, not the main dish.
<imgsrc="chart.png"alt="Revenue increased from $10k to $18k"title="Revenue chart for Q4" /
If you can only write one, write alt.
Can you use the title attribute on any element?
You can add the title attribute to most HTML elements, because it’s a global attribute in HTML. That said, tooltips don’t appear for every element in every browser, and behavior can depend on CSS and layout. Practical use tends to cluster around links, buttons, images, abbreviations, and small UI elements.
How browsers display tooltips
Most browsers show the title attribute as a small tooltip on hover. The exact styling and delay are controlled by the browser, not your CSS. That means you can’t reliably control timing, font, or placement.
If you need a tooltip you can style and that works on touch devices, you usually build one with HTML, CSS, and JavaScript, or use a UI library.
Common mistakes to avoid
Using title as the only label
<buttontitle="Submit"></button>
A blank button is still a blank button for many users. Add visible text or an accessible label.
Writing long paragraphs
<atitle="This link will take you to a page where you can read about...">Read</a>
Tooltips aren’t meant for essays. People won’t read them, and some devices won’t show them.
Repeating visible text
<ahref="/about"title="About">About</a>
This adds little value. Use title only when it clarifies something.
Trying to use it for SEO
Search engines focus on visible content, structure, and other signals. The title attribute on elements is not a good SEO lever. If the goal is SEO, work on your page title (<title>), headings, and on-page text.
A quick checklist for good title attribute text
- Short phrase, not a sentence if you can avoid it
- Adds information that isn’t already obvious
- Doesn’t contain critical instructions someone might miss
- Paired with accessible naming for controls when needed
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot