abbr (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE7+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
A simple abbreviation is marked up as follows:
<p>The page had the phrase <abbr title="Please Turn Over">PTO</abbr>
written on it. If only I knew what PTO meant! I turned the page
to see if that revealed the answer.</p>
- Type
- phrase element
- Contains
- inline elements only
- Contained by
- block-level elements, inline elements
Description
The abbr
element is used to provide a fully expanded alternative to an abbreviated
phrase. The intention is that browsers and other assistive technologies
will interpret this information and present it to the user in an
appropriate format when requested.
Some documents, by their very nature, may include numerous abbreviations or acronyms. Marking up each and every one could cause the document to become very unsightly in some browsers—and would be tedious for the author having to mark each one up! A general convention is to mark up the first instance of any abbreviation or acronym.
Use This For …
The abbr
element contains the text that’s part of the abbreviation, and has just
one attribute: the title
attribute.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Support for
abbr is varied. Internet Explorer versions 6 and
earlier don’t understand the element at all, or make it available in the
DOM tree for interrogation.
In all other browsers, the
abbr is supported, but in varying visual styles.
Firefox and Opera underline a marked-up abbreviation with a light dotted
line (this can be styled using CSS); Safari recognizes the
abbr content, but doesn’t draw attention to it with an
underline. Firefox, Opera, and Safari all display the
title attribute for the abbreviation as a tooltip
(hence, it’s available to mouse users, but not keyboard users).
In
Firefox, an abbr would display as shown in Figure 1 when moused over.
title attribute of
abbr shown in Firefox
In Opera 9.2, the tooltip appears in a similar fashion, but with the text “Title:” appended to it, as shown in Figure 2.
title attribute of
abbr shown in Opera 9.2
As a result of the compatibility issues associated with it, many people prefer not to use this element. Instead, they write it out in full in the document in the first instance, as follows:
<p>The page had the phrase PTO (Please Turn Over) written on it. If
only I knew what PTO meant! So I turned the page to see if that
revealed the answer.</p>
The ways in which browsers
deal with the abbr element—presenting it in a tooltip,
underlined, italicized, and so on—do little to help users reading the
content in printed form. This provides yet another reason to simply write
out the abbreviation in the text, as shown in the HTML above. You may
consider using generated content in CSS instead, but that approach is
hindered by some browser support limitations.
Despite variations in
the presentation of abbr content, the support chart
shows that full support is provided by all browsers (except for IE 6 and
earlier), as there are no guidelines in the W3C specifications to indicate
how browsers should treat such content. If the element is exposed in the
DOM tree, and if the browser does something with it, that constitutes full
support.
User-contributed notes
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 10:13:10 GMT
Opera and Firefox only render an ABBR element with a dotted underline if it has a TITLE attribute.
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.
