title (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
Full Full Full Full

Syntax

title="string"

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:

  • base
  • basefont
  • head
  • html
  • meta
  • param
  • script
  • title

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

Related Products