HTML <Abbr> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <abbr> Tag defines an abbreviation or acronym, such as HTML or CSS. It takes a title attribute, which will show as a tooltip to describe the acronym.

Usage and Examples

The <abbr> is used to:

  • Mark up an abbreviation semantically. This can be useful to style abbreviations with CSS or to target any scripts.

    The <abbr>UK</abbr> is made up of England, Scotland, and Wales.
    The UK is made up of England, Scotland, and Wales.

  • Specify an abbreviation along with the tooltip by using a title attribute. This is useful when you want to provide further information without interrupting the flow of the document.

    The <abbr title="United Kingdom">UK</abbr> is made up of England, Scotland, and Wales.
    The UK is made up of England, Scotland, and Wales.

Attributes

The abbr Tag supports the Global Attributes and the following:

  • title

    The title attribute specifies the description of the abbreviation when you hover over the element.

    The <abbr title="United Kingdom">UK</abbr> is made up of England, Scotland, and Wales.

Best Practices

  • Spell out acronyms on first use. It is advisable to spell out an acronym or abbreviation when first used on the page to improve accessibility. This aids readability and is generally more helpful for readers who may be unfamiliar with technical jargon.

    The United Kingdom (<abbr>UK</abbr>) is made up of England, Scotland, and Wales.
    The United Kingdom (UK) is made up of England, Scotland, and Wales.
    We’ve looked at accesibility and whether the <abbr> tag improves SEO here.

  • Use with <dfn> Tag. You can use the <abbr> tag in conjuction with the <dfn> tag to define the abbreviation.

    The <dfn><abbr title="United Kingdom">UK</abbr></dfn> is made up of England, Scotland, and Wales.

    The UK is made up of England, Scotland, and Wales.
  • If you wish for screen readers to spell out an abbreviation, rather than try to pronounce it as an entire word, you can use the CSS property speak:spell-out.

  • Where the abbreviation is part of the language, such as “Mr”, you may want to use the ‘aria-label’ to have it pronounced properly, such as “Mister”.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes