acronym (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE6+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
An acronym is marked up as follows:
<p>He marvelled at how fluid the <acronym title="Graphical User
Interface">GUI</acronym> was. It truly was a gooey GUI.</p>
- Type
- phrase element
- Contains
- inline elements only
- Contained by
- block-level elements, inline elements
Description
The acronym
element is similar to the abbr element, but takes
matters one step further. Whereas the abbr element is
used to describe any abbreviated phrase, acronym is
used only where the phrase comprises initial letters that make a word.
Often, the acronym can be spoken as if it were a word—consider NASA,
pronounced “nassa,” or GUI, pronounced “gooey.” The intention is that
browsers and assistive technologies will interpret this information and
present it to the user in an appropriate format as and when
requested.
The fact that this element is an acronym rather than an abbreviation offers benefits for users of assistive technologies such as screen readers, who may prefer to have the abbreviated phrase announced as a word—“nassa” instead of “enn-ay-ess-ay.”
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 document’s author. A general convention is to mark up the first instance of an acronym.
Use This For …
The
acronym element contains only the text that is part of
the abbreviation, and has just one attribute: the title attribute.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | Full | |
| 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 the
acronym element is varied, at least in a visual sense.
Firefox and Opera underline an abbreviation with a slight dotted line
(this can be styled using CSS); Safari recognizes the
acronym 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
(so it’s available to mouse users, but not keyboard users).
In Firefox, an acronym displays as shown in Figure 1.
Because of the compatibility issues, 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>He marvelled at how fluid the GUI (Graphical User Interface)
was. It truly was a gooey GUI.</p>
The ways in which browsers deal with the
acronym 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 might consider
using generated content in CSS instead, but that
approach is hindered by some browser support limitations.
Despite
variations in the presentation of acronym 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
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.
