| Depr. | Version |
|---|---|
| No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Syntax
Description
The
title attribute allows the author to provide extra
information about any element on a page. Typically, this attribute’s
content is rendered as a tooltip that appears when the user hovers the
cursor over the element to which the title is
applied. It’s most frequently used for the a element, to provide additional information
about the link destination. It also appears within form elements, usually
to offer tips about the format that data is preferred in (for example,
date formats), and it is frequently used with the abbr and acronym elements, as it’s
used to provide the expanded version of the abbreviations contained in
those elements. Although it’s not a required attribute for
abbr and acronym elements, it’s
strongly recommended.
The way in which browsers have
traditionally rendered title content—in a tooltip
that appears as users mouse over the element in question—has encouraged
many developers to use it as a space-saving mechanism. They see it as a
way to provide help without cluttering up the page with extra words, and
to make content easy to find if a user pauses for thought while mousing
over a given element. However, this is not a good technique, for several
reasons:
- Not everyone uses a mouse, and few browsers render the tooltip content if the user has tabbed to that element with the keyboard.
- The tooltip content doesn’t appear for long in all browsers. It times out after a short while, which can potentially prevent the user from reading it properly (Opera’s treatment of the tooltip is the exception to this rule).
- The tooltip content is often truncated, so it may not be possible to convey the desired information in the space provided.
- Users who are having difficulty with a section on a page may not move their cursor over that specific section, so they may not see the tooltip at all.
- The nature of the tooltip means that it’s not possible for the
user to print out the content contained inside the
title, nor is there any way of copying and pasting that text anywhere.
As such, the title attribute
should be considered as one that can be used to offer additional
information, but it shouldn’t be relied upon. If you have key
information to present to the user, it should be written directly into the
document for all to see—don’t rely on the browser to display it on the
fly.
Note that the title attribute cannot be
applied to the following elements:
basebasefontheadhtmlmetaparamscripttitle
Example
The
abbr and acronym elements use the
title attribute to provide the full wording for the
abbreviation (although it’s not a required attribute for these
elements):
<div>The <abbr title="Americans with Disabilities Act">ADA</abbr>
is there for your protection.</div>
<div>This pub is rated highly by <acronym title="Campaign for Real
Ale">CAMRA</acronym>.</div>
A link may
include a title attribute, which may offer extra
help to a user, and can be enhanced or made more obvious with the use of a
JavaScript technique:
<a href="minutes.html" title="Minutes cover topics discussed,
including refuse collection, housing taxes and social care
policies">June meeting minutes</a>
Value
Any value can appear within this attribute, but given the problems associated with the ways browsers present this information, it’s good practice to keep the information concise. This will increase your chances of having the content read by the user.Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
Every browser listed supports this attribute.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.