- Sep 5, 2013
- 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
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.