Writing abbreviations on the web
Words by Daniel Aleksandersen on 2007-06-26
I dislike seeing abbreviations actually spelled out in web articles. I think web authors should use the abbr tag instead. It will make texts easier to read and still provide aid to those not familiar with the abbreviation!
Quick how-to
This is a <abbr title="Basic Abbreviation Tag Example">BATE</abbr>.
In the above example the abbreviation will be explained to the user when hovering over the abbreviation instead of beaing spelled out.
It is considered good practice to only explain the first instance of an abbreviation in an article.
Styling abbreviations
The following CSS is really good for styling abbreviations. It will apply a dotted underline to abbreviations, change the cursor to a help icon, and even spell out the abbreviation on print!
abbr { cursor: help; border-bottom: 1px dotted #232323; }
@media print { abbr[title]:after { content: " [" attr(title) "] "; color: #808080; } }
6 comments
I never knew about this. I do use abbreviations occassionally, and will definitely start using this.
Thanks for the tip.
Brian Heys at 2007-06-29 @624.
You have got the dfn tag too.
Daniel Aleksandersen at 2007-06-29 @889.
There's a few problems with the abbreviation, acronym and definition tags.
Firstly, the definition tag is not as well known as the previous, nor is it supported in IE6
mik at 2007-07-02 @932.
What problems are you refering to?
Daniel Aleksandersen at 2007-07-02 @978.
For some reason it didn't post my entire comment. Basically, general web users don't often differentiate the styling of elements - so they may consider the stylised word to be a link. Additionally, a lot of people don't wait for the title to display. This can partially cured by the use of JS to style the actual title, but why not just save time and flesh out the acronym in brackets (or vice-versa). It's what they have to do in written documents.
mik at 2007-07-08 @740.
The help cursor and the dotted underline should do the trick. I do agree that websites fiddling with the link styling (applying dotted underlines, ..) may confuse users. However I do not consider it a problem for websites who do leave the links alone.
You can use CSS content generation to have the abbreviations appear in brackets. It is what I do on the print version. (As explained above.)
Daniel Aleksandersen at 2007-07-08 @784.
Leave your comment