To <abbr> or not to <abbr>?

Georgina Laidlaw brought up the interesting topic of abbreviated words in her article Using Short Form Words Online: a Primer. She writes about a SitePoint commenter suggesting the use of the HTML element: <abbr></abbr>.

The tag can be used to mark up abbreviations and acronyms, and doing so gives useful information not only to users, but also to search engine robots, screen readers, spell checkers and translators.

The W3C describes the use of <abbr></abbr>:

The objective of this technique is to provide expansions or definitions for abbreviations by using the <abbr> elements. It is always appropriate to use the <abbr> element for any abbreviation, including acronyms and initialisms.

So What does it do?

Used with the title element, this creates a tooltip the user can hover their cursor over to expand or define the abbreviation.

Let’s see it in action – <abbr>usage</abbr>

An example of the <abbr></abbr> can be seen in the below paragraph.

There’s selling and there’s selling—not every CTA has to take the form of “Click to download your free report and start crushing it today!” But if you can give a user a good reason to take the action you want, you’ll have a much better chance of getting them to do it.

<p>There’s selling and there’s selling—not every <abbr title="Call To Action">CTA</abbr> has to take the form of “Click to download your free report and start crushing it today!” But if you can give a user a good reason to take the action you want, you’ll have a much better chance of getting them to do it.</p>

So do you use the <abbr> element in your projects, and when do you not use it?

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.