Constructing Content - HTML5 with CSS3 - page 111

for Automatic Teller Machine or CSS for Cascading Style Sheets , or from initials extracted from the
syllables of a long word, such as DNA for deoxyribonucleic acid (these are also called initialisms ).
An acronym is a specific type of abbreviation, being a pronounceable word formed from the first letters of a
multiword phrase— laser from light amplification by simulated emission of radiation and PIN from personal
identification number —or the first portion of each word, as in retcon from retroactive continuity and
sysadmin from system administrator .
Previous versions of HTML included an acronym element specifically for marking up acronyms as a
distinct type of abbreviation, but browser support for acronym is still inconsistent after all these years, and
web authors are often confused about when to use abbr or when to use acronym . HTML5 has eliminated
these problems by eliminating the acronym element altogether. Acronyms are abbreviations themselves,
so the more general abbr element covers acronyms as well.
Use the abbr element similarly to dfn to point out the defining instance of an abbreviation, the first time it's
introduced in a body of text. You can use the abbreviation in text thereafter without any special markup. Of
course, not every abbreviation needs to be called out: common ones such as etc. and Inc. probably don't
require explanation. Use your best judgment based on your understanding of the content and your
audience.
An abbr element can (and usually should) include the expanded form of the term in a title attribute. As
with the dfn element, if the abbreviation is explained in the regular text, expanding it in a title attribute
isn't necessary. However, if a title attribute is present, its value must be the expanded form of the
abbreviation and nothing else.
Listing 4-33 shows two ways to introduce an abbreviation in text.
Listing 4-33. Abbreviations marked up with the abbr element
<blockquote>
<p>After the <abbr title="Electro-Magnetic Pulse">EMP</abbr> incapacitated
all my electronics, I feared I would be trapped on that rooftop without the
use of my anti-gravity belt. Luckily I still had my trusty Gravity-Assisted
Descent Grapple Extension Tool ( <abbr>GADGET</abbr> ) from Power Outfitters.
Its double-braided polyfiber construction is purely analog, and thus immune
to all electro-magnetic disturbances. I rappelled down with ease!</p>
</blockquote>
Some browsers (like Firefox for Mac, shown in Figure 4-20) display an abbr element with a dotted
underline if it carries a title attribute, and no decoration if the attribute is absent. Other browsers don't
apply any default styling to abbr elements at all. Most browsers do display the value of the title attribute
in a “tooltip” when the user's pointer lingers over the element, to reveal the extended form of an
abbreviation.