How To Define Acronyms Within Your Content

By jeffcAdvertising

As I was reading a post written by Lorelle over at the BlogHerald discussing how to help readers keep up with your blog, I came across a tip which I thought I would illustrate here as well. It has to do with defining acronyms within your post in case your readers don’t understand the lingo of your niche.

I’ve been wondering for quite awhile now if there was a way to illustrate what an acronym means without having to place the definition next to the word. I’ve seen many people comment that they become annoyed when an acronym is used and right next to it, is the full sized set of terms. Thanks to Lorelle’s post, I came across the <acronym> tag. When you use the acronym tag, the definition appears as a tooltip when a user hovers their mouse cursor over the word. Place your mouse cursor over the word HTML and see what happens.

The use of the tag is as follows:
<acronym title=”HyperText Markup Language”>HTML</acronym>

You can even add a CSS class to your themes Stylesheet so that each time you use the tag in your content, it has a unique look. To add the class to your stylesheet, copy and paste the following code into your CSS file and style it to your hearts content.

acronym { border-bottom: 1px dotted black; }

For more information and a bonus CSS class that spells out acronyms when users print your web pages from Opera or FireFox, read this article, Defining acronyms on DiveIntoAccessibility.

5 thoughts on “How To Define Acronyms Within Your Content”

  1. IA has raised a good point about the use of the tag as opposed to the tag as acronym is now a deprecated element in both HTML 5 and XHTML 2.0 .

    You do need to use the title attribute to get the hover over affect though- USA

    However, this raises problems of its own, as good old IE6 doesn’t recognise the element. I highly recommend the following article from A List Apart if anyone would like to get into the detail of it – http://www.alistapart.com/articles/hattrick . It is a bit out of date regarding its discussion of XHTML 2.0, which is pretty much a dead duck now that HTML5 is on the scene. But it has very sound advice regarding the correct usage to ensure accessibility of abbreviations.

    jaseemumer’s comment above about people not knowing that there is extra information to be gained if you hover over an abbr element is very easily corrected in a CSS file – and most browsers have a default behaviour of placing a dotted line underneath.

  2. This is wonderful and very useful piece of information. Time and again I have been compelled to bookmark this website pages as they are very useful indee! Thanks a lot.

  3. The <acronym> tag will be dropped in the future version of HTML (HTML5). Use <abbr>> instead. Same usage.

    From W3.org:

    “acronym is not included because it has created lots of confusion. Authors are to use abbr for abbreviations.”

  5. You can also modify the cursor with {cursor: help;}. And style the abbr tag too. Here’s what I do in my themes.

    .entry-content abbr,
.entry-content acronym {
  border-bottom: 1px dotted #333;
  cursor: help;
}

Comments are closed.