- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- 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.
... <body> <p>The<abbr title="National Football League">NFL</abbr>promised a<abbr title="light amplification by stimulated emission of radiation"> laser</abbr>show at 9 p.m. after every night game.</p> <p>But, that's nothing compared to what<abbr>MLB</abbr> (Major League Baseball)did. They gave out free<abbr title="self-contained underwater breathing apparatus">scuba</abbr>gear during rain delays.</p> </body> </html>
When abbreviations have a title attribute, Firefox and Opera draw attention to them with a dotted underline. (You can instruct other browsers to do the same with CSS; see the tips.) In all browsers except IE6, when your visitors hover on an abbr, the contents of the element’s title are shown in a tool tip.
Chrome and some other browsers display the title of abbreviations as a tool tip, but they don’t display the abbreviation itself any differently unless you apply some CSS yourself.
To explain abbreviations
- Type <abbr.
- Optionally, next type title="expansion", where expansion is the words that represent the abbreviation.
- Type >.
- Then type the abbreviation itself.
- Finally, finish up with </abbr>.
- Optionally, type a space and (expansion), where expansion is the words that represent the abbreviation.
TIP
It’s common practice to include an abbreviation’s expansion (by way of a title or a parenthetical) only the first time it appears on a page 
.
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 touch screen 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, browsers like Firefox and Opera display abbr with a dotted bottom border if it has a title 
. If you’d like to replicate that effect in all browsers (except IE6), 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.