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

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

  • Print
  • + Share This
  • 💬 Discuss
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.



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


comments powered by Disqus