The abbr element

The name of the <abbr> element is an abbreviation for the word “abbreviation”, which is cute. When you talk about <abbr> (which won’t happen very often) you can pronounce it “ah! brrrrr”, like you have just realised how cold it is. This is not mandatory.

As the abbreviated name for the abbreviation element (<abbr>) suggests, it is an element used to mark up... abbreviations. These can include initialisms, numeronyms, and acronyms.

<abbr>HTML</abbr>

This is an example of what is sometimes called semantic HTML: a slightly tricky concept I have now foolishly invoked and had better do my best to explain.

Here goes!

Much has been said about HTML semantics over the years and most of it has been wrong. That’s because semantics are a concept from linguistics, which is part of the humanities, and the people talking about HTML semantics concern themselves with different subjects like computer science and Hentai.

Semantic means, well, meaningful. Something that is semantic carries meaning. Would it help if I told you the word comes from the Greek semantikos, meaning significant? No, it would not. But it makes me sound more scholarly, so I’m glad we covered that.

The question is: meaningful to who? That’s where folks get muddled up.

Let’s say you decide your word for a large, muscular, cartilaginous and sharp-toothed fish is “chomparoo”. The term helps you differentiate these fish from smaller, boney fish (or “swimblers”) in your personal and private taxonomy of sea life.

The term is less useful should you ever need to alert someone to the presence of the larger, more aggressive fish. Shouting “chomparoo! chomparoo!” from atop your Baywatch-style lifeguard chair will not elicit the intended response. “Hasselhoff is having a stroke,” swimmers might think. “I’m in imminent danger of being eaten by a <shark/>” is less likely to come to mind.

The <abbr> and </abbr> tags enclosing the text “HTML” say “this text, ‘HTML’, is a type of abbreviation”. But it doesn’t just say that to you, it says it to everyone and their computers. When it comes to <abbr>, we’re all on the same (web) page. Even as an impressive alpha male who stands alone and, somehow, simultaneously walks their own path, I’m sure you can appreciate the benefits of having a standard and agreed way of doing things. The first benefit that occurs to me regards syndication.

Some brave folks will mainline web pages, loading them directly into their browsers; associated CSS styles, scripts, adverts, errors, everything. They get the full, phantasmagoric experience the author (or, more likely, the author’s horrendous employer) intended.

Others prefer to boil off the impurities, leaving just the content. Feed readers, unlike browsers, feed on just the syndicated content of websites, and present that content to you in their own way. Using a feed reader, you can read content from all over the web without having to learn a new interface (or slalom around a bunch of ad banners) each time you open an article.

The point I’m slowly getting to is that the original website and the feed reader can each anticipate <abbr> elements appearing in the content. Which means they can each provide a presentation for that element with the complementary technology CSS (Cascading Style Sheets). By keeping content (HTML) and presentation (CSS) separate, the content can be presented in different ways, by different people and their software.

"Feed readers? Pah! Nobody uses them, the real reason for semantic HTML is accessibility!"

Screen reader software is designed to provide an audio presentation of your computer applications—including your browser—using a synthetic voice. Screen readers do look for semantic HTML. Elements like headings (<h1>, <h2>, etc) are critical in helping screen readers communicate structure and provide navigational cues to their users.

But I have a couple of modest stipulations:

  1. Web accessibility is a matter of making the web accessible for disabled people. Not only disabled people and not all disabled people operate screen readers. Therefore, it would be more accurate to say, “one reason for semantic HTML is screen reader compatibility.”
  2. Not all semantic elements are particularly accessible and some aren’t acknowledged by screen readers at all. The screen reader compatibility of your web page is not proportionate to how many semantic elements you shove down its gullet.

Point (2) applies to <abbr>. The big idea with <abbr> is that you can secrete an expanded version of the abbreviation using a title attribute.

<abbr title="Hypertext Markup Language">HTML</abbr>

So much of my time as a web developer has been spent hiding things away from users so they can later reveal them and so much of that time I should have just left things as they were. If you are looking for User Experience advice from me, it is this: stop hiding things behind tabs and in popups or inside attributes. Stop making users go looking for things!

But if you really can’t resist hiding information away, perhaps the very worst, most hateful way you can do that is by using a title attribute. You will not believe just how much this attribute sucks. Let me count the ways:

  1. Most screen readers, especially in default configurations, do not acknowledge the title attribute. The contents of the title attribute will not be announced in screen readers; screen reader users will not find out what HTML means. So you better hope they know already.
  2. The title attribute only appears on hover?? So I’m supposed to plug a mouse into my smartphone??
  3. You cannot affect the way the title looks and, if you’re hovering over abbreviations with a mouse like it’s 2002, you’ll already know it looks like arse.

We tend to think of web accessibility as a concern for web developers and often it is. I’m often deeply concerned by the inaccessibility of professional developers’ work. See what I did there?

In this case, the last word on accessible abbreviations should be given to the unsung heroes of the web: the content editors. If a content editor hasn’t already told you to expand or explain your abbreviations the first time they appear, it is only a matter of time. Listen to them.

This article is about <abbr>HTML</abbr> (Hypertext Markup Language). The presentation of <abbr>HTML</abbr> pages is affected using <abbr>CSS</abbr> (Cascading Style Sheets).

Not everyone is a fan of my writing. But if you found this article at all entertaining or edifying, I do accept tips. I also have a clothing line: