<abbr>
An abbreviation or acronym, with an optional expansion in the title attribute.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>
We describe a page's structure in <abbr title="HyperText Markup Language">HTML</abbr>,
and give it a look in <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>Definition and usage
#The <abbr> element marks an abbreviation or acronym, such as HTML, API, or SEO. You can give the full expansion in the global title attribute: the browser will show it in a tooltip on hover, and underline the abbreviation itself with a dotted line.
The title tooltip has its drawbacks, though. You won’t see it on a phone or while using the page with a keyboard, and screen readers read it out inconsistently. So it’s best to spell out the abbreviation in the text the first time it’s used, e.g. "application programming interface (API)," and treat title as a bonus.
You don’t have to mark every abbreviation. Common ones, such as "e.g." or "etc.," don’t need <abbr>. The element is useful for abbreviations the reader might not know.
Syntax
#<abbr title="full expansion">abbr</abbr>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>
An application programming interface (<abbr>API</abbr>) is a set of rules
programs use to exchange data. Every <abbr>API</abbr> has its own documentation.
</p>Default CSS
#Most browsers display this element with these default styles:
abbr[title] {
text-decoration: underline dotted;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Spell out the abbreviation in the text on first use. Only mouse users will see the
titletooltip. - The
<acronym>element is deprecated. Use<abbr>for all abbreviations and acronyms. - You can change the dotted underline in CSS, but leave some signal that the abbreviation has an expansion.
Related entries
#- <dfn>A term being defined at this point in the text, that is, the first, explanatory use of the concept.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <cite>The title of a work: a book, an article, a movie, a song, a game, or a piece of software.
- <code>A piece of computer code: the name of a variable, function, tag, or file, as well as a short listing.
Spotted a mistake or missing an example? Write to us.