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-a.jpg through Image). 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-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.


Click to view larger image

red-b.jpg When abbreviations have a title attribute, Firefox and Opera draw attention to them with dots underneath the text. You can instruct other browsers gray-c.jpg to do the same with CSS; see the tips.


Click to view larger image

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

  1. Type <abbr.
  2. Optionally, next type title="expansion", where expansion is the words represented by 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 represented by the abbreviation.
  • + Share This
  • 🔖 Save To Your Account