Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 (red_circle-a.jpg through red_circle-c.jpg). 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.

red_circle-a.jpg 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.



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


red_circle-b.jpg 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.


red_circle-c.jpg 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

  1. Type <abbr.
  2. Optionally, next type title="expansion", where expansion is the words that represent the abbreviation.
  3. Type >.
  4. Then type the abbreviation itself.
  5. Finally, finish up with </abbr>.
  6. Optionally, type a space and (expansion), where expansion is the words that represent the abbreviation.
  • + Share This
  • 🔖 Save To Your Account