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:
- 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.â
- 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:
- Most screen readers, especially in default configurations, do not acknowledge the
title
attribute. The contents of thetitle
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. - The
title
attribute only appears on hover?? So Iâm supposed to plug a mouse into my smartphone?? - 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).