References

Beginner-friendly references for web development, with live, editable examples.

The HTML title attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML title attribute provides advisory information about an element, shown as a tooltip when the pointer hovers over it. It is a global attribute. Because tooltips are not reliably keyboard- or touch-accessible, never place essential information only in a title.

Overview

The title attribute holds extra, advisory text about an element. Most browsers show it as a small tooltip after the pointer hovers for a moment.

It is convenient but limited: the tooltip does not appear on keyboard focus by default, there is no hover on touch screens, the styling and timing are not controllable, and screen-reader support is inconsistent. Treat title as a supplementary hint only. Two places where it genuinely earns its keep are the required title on an iframe and expanding an abbreviation with <abbr>. For an accessible name, prefer visible text or aria-label.

Syntax

<abbr title="HyperText Markup Language">HTML</abbr>

Values

Value
Advisory text (a string). Line breaks are allowed.

Example

Live example 
<p><abbr title="HyperText Markup Language">HTML</abbr> is the language of the web. Hover the abbreviation to see its <code>title</code>.</p>

Best practices

  • Never store essential information only in a title — mouse-free and touch users will miss it.
  • Give every <iframe> a descriptive title so its purpose is announced.
  • Use title on <abbr> to expand abbreviations and acronyms.
  • For an element's accessible name, prefer visible text or aria-label over title.

Accessibility

The title attribute is one of the least reliable ways to convey information:

  • The tooltip is shown on hover, so keyboard-only and touch users usually never see it.
  • Screen readers expose title inconsistently, and often only as a fallback when no other accessible name exists.

Use it for supplementary hints only. When text must be perceivable by everyone, make it visible or provide it with aria-label / aria-describedby.

Frequently asked questions

What does the HTML title attribute do?
It supplies advisory text that browsers display as a tooltip when the user hovers over the element.
Is the title attribute accessible?
Only partially. Tooltips usually do not show on keyboard focus, are unavailable on touch devices, and screen-reader support varies. Do not put essential information solely in a title.
title attribute vs aria-label — which should I use?
Use aria-label (or visible text) to give an element its accessible name; use title only for non-essential, supplementary hints.
Where is the title attribute actually recommended?
On <iframe> (where it labels the frame) and on <abbr> to expand an abbreviation.
tabindex translate