Writing abbreviations on the web
Posted on 26. Jun, 2007 by Daniel Aleksandersen in Typsetting
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; } }
Brian Heys
29. Jun, 2007
I never knew about this. I do use abbreviations occassionally, and will definitely start using this.
Thanks for the tip.
Daniel Aleksandersen
29. Jun, 2007
You have got the dfn tag too.
mik
02. Jul, 2007
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
Daniel Aleksandersen
02. Jul, 2007
What problems are you refering to?
mik
08. Jul, 2007
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.
Daniel Aleksandersen
08. Jul, 2007
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.)