HTML has many properties. There are a couple of them we don’t use that often and we will discuss one today. It is called the ABBR property and is used to explain and mark-up abbreviations. We bloggers write for the web and we shouldn’t forget the text should be understandable for everyone.

You might have seen news sites and information websites use this property. In the text, an abbreviation is underlined with a little gray and dashed line. When your mouse rolls over that link-look-alike, you come to the conclusion it is something else. An explanation about the abbreviation shows up. You might have seen this property more than you think.

Ok. But what is the point of using ABBR in your website? These arguments should convince you:

1. Better for Accessibility – Using ABBR properties in your website will only optimize the accessibility of your website. Some visitors might don’t know terms like “SQL”, “AI” or “NASA”. Look at yourself, do you know them all? You should try as hard as possible to make your content as accessible as possible.

2. Educate your visitors – Many websites and blogs are here to teach people with their knowledge. Those have different subjects and different visitors. When they are reading an article, everything should be clear about the topic. When acronyms or abbreviations aren’t clear enough, the visitor might do not understand the whole article.

3. Multiple purposes – Not only are you educating your visitors, you will make it easier for spell checkers, translators and speech synthesizers to understand the meaning of an abbreviation and therefore the meaning of a sentence.

4. Search engine optimizing – Another advantage is the search engine (yes, they are everywhere!). When you are using an abbreviation instead of a couple keywords, the SE isn’t totally clear what you mean and therefore they couldn’t display the most accurate data to their users.

When you are using the ABBR function in HTML, it will explain the abbreviation to the search engine as well and you have yourself an extra keyword. Always great, right?

How to use ABBR?

ABBR is not hard to use. It only uses the “title” tag to explain the abbreviation. As always, CSS is around the corner to style your ABBR tag in a way you prefer.

1

<abbr title="Structured Query Language">SQL</abbr>

When you add ABBR to an other “SQL” abbreviation elsewhere in the page, around it is everything you need to do.

When ABBR, and when Acronym?

Some abbreviations like “URL” and “SQL” are pronounced letter by letter by some, and as a normal word by others. The ABBR property should be used in these cases. Other abbreviations are just normal ‘words’ like “NAVO” or “ASAP”. Those should be surrounded by the acronym property.

1
2
3

<abbr title="Structured Query Language">SQL</abbr>
<acronym title="Naval Oceanographic Office">NAVO</acronym>

Disadvantages?

Everything has its disadvantages. The use on a blog or website has a major problem. Internet Explorer will not play along as it simply doesn’t recognize the property.

But there is a solution for Internet Explorer. We can add something extra HTML to the original codes:

1

<abbr title="Structured Query Language"><span class="abbr" title="Structured Query Language">SQL</span></abbr>

In Internet Explorer, ABBR isn’t recognized and therefore not styled. The extra span is there to get this done in another way. Below are the style declarations you should use if you want your visitors to think they are dealing with the original ABBR property:

1
2
3
4
5
6
7

abbr, acronym, .abbr {
  cursor: help;
  border-bottom: 1px dashed #ccc;
}

Conclusion

Internet Explorer is always bugging a webdesigner. All we can do is waiting until all IE users switch to a better browser. This is hard to achieve and in the meantime… We have to live with it.

I think the advantages of this property really are great, and the Internet Explorer problem is not that big. Thanks for your time.