- 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
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.