element is similar to the
abbr element, but takes
matters one step further. Whereas the
abbr element is
used to describe any abbreviated phrase,
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
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.
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>
Use This For …
acronym element contains only the text that is part of
the abbreviation, and has just one attribute: the title attribute.
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 and Chrome recognize the
acronym content but do not draw attention to it with an
underline. Firefox, Opera, Chrome 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.
variations in the presentation of
acronym content, the
support chart shows that full support is provided by all browsers (except
for IE 5.5), 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.