- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Explaining Abbreviations
Abbreviations abound, whether as Jr., M.D., or even good ol’ HTML. You can use the abbr element to mark up abbreviations and explain their meaning (
through 
). You don’t have to wrap every abbreviation in abbr, only when you think it would be helpful for visitors to be given the expanded meaning.
Use the optional title attribute to provide the expanded version of an abbreviation. Alternatively, and arguably preferably, you could place the expansion in parentheses after the abbreviation. Or mix and match. Most people will be familiar with words like laser and scuba, so marking them up with abbr and providing titles isn’t really necessary, but I’ve done it here for demonstration purposes.
)
When abbreviations have a title attribute, Firefox and Opera draw attention to them with dots underneath the text. You can instruct other browsers 
to do the same with CSS; see the tips.
)
Browsers display the title of abbreviations as a tool tip when you hover the pointer over text marked up with abbr. (This figure also demonstrates an example of a browser—Chrome in this case—that doesn’t style abbreviations with a title any differently than regular text by default.)
To explain abbreviations
- Type <abbr.
- Optionally, next type title="expansion", where expansion is the words represented by the abbreviation.
- Type >.
- Then type the abbreviation itself.
- Finally, finish up with </abbr>.
- Optionally, type a space and (expansion), where expansion is the words represented by the abbreviation.
TIP
A parenthetical abbreviation expansion is the most explicit way to describe an abbreviation, making it available to the widest set of visitors 
. For instance, users on touchscreen devices like smartphones and tablets may not be able to hover on an abbr element to see a title tool tip. So if you provide an expansion, consider putting it in parentheses whenever possible.
TIP
As a visual cue to sighted users, Firefox and Opera display abbr with a dotted bottom border if it has a title 
. If you’d like to replicate that effect in other browsers, add the following to your style sheet: abbr[title] { border-bottom: 1px dotted #000; }. Browsers provide the title attribute’s contents as a tool tip regardless of whether the abbr is styled with a border.
Proximity of a Term and Its Definition
The location of a term marked with dfn relative to the location of its definition is important. HTML5 states, “The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.” Simplified, this means that the dfn and its definition should be near each other, which makes sense. This is the case in both and the example given in the fourth tip; the dfn and its definition are in the same paragraph.