<abbr> - HTML Abbr Tag

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

Chrome	Edge	Firefox	IE	Opera	Safari
Yes	Yes	Yes	Yes	Yes	Yes

Mobile

Android Webview	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet
Yes	Yes	Yes	Yes	Yes	Yes

HTML <Abbr> Tag