Abbr

<abbr>: The Abbreviation element #

::: section-content The <abbr> HTML element represents an abbreviation or acronym.

When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.

The optional title attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, title must contain this full description and nothing else. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <abbr> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

You can use CSS (Cascading Style Sheets) to style your HTML (HyperText Markup Language). Using style sheets, you can keep your CSS presentation layer and HTML content layer separate. This is called “separation of concerns.”

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} abbr { font-style: italic; color: chocolate; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only supports the global attributes. The title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Each <abbr> element you use is independent of all others; providing a title for one does not automatically attach the same expansion text to others with the same content text. :::

Usage notes #

Typical use cases #

::: section-content It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

  • When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <abbr> with an appropriate title.
  • To define an abbreviation which may be unfamiliar to the reader, present the term using <abbr> and inline text providing the definition. Include a title attribute only when the inline expansion or definition is not available.
  • When an abbreviation's presence in the text needs to be semantically noted, the <abbr> element is useful. This can be used, in turn, for styling or scripting purposes.
  • You can use <abbr> in concert with <dfn> to establish definitions for terms which are abbreviations or acronyms. See the example Defining an abbreviation below. :::

Grammar considerations #

::: section-content In languages with grammatical number{target="_blank"} (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English. :::

Default styling #

::: section-content The purpose of this element is purely for the convenience of the author and all browsers display it inline ( display: inline) by default, though its default styling varies from one browser to another:

Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <span> element. To control this styling, use text-decoration and font-variant. :::

Examples #

Marking up an abbreviation semantically #

::: section-content To mark up an abbreviation without providing an expansion or description, use <abbr> without any attributes, as seen in this example.

HTML #

::: code-example [html]{.language-name}

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Styling abbreviations #

::: section-content You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML #

::: code-example [html]{.language-name}

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

:::

CSS #

::: code-example [css]{.language-name}

abbr {
  font-variant: all-small-caps;
}

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Providing an expansion #

::: section-content Adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.

HTML #

::: code-example [html]{.language-name}

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

:::

Result #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Defining an abbreviation #

::: section-content You can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.

HTML #

::: code-example [html]{.language-name}

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

:::

Result #

::: {#sect4 .code-example} ::: iframe ::: ::: :::

Accessibility concerns #

::: section-content Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

Only include a title if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.

HTML #

::: code-example [html]{.language-name}

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

:::

Result #

::: {#sect5 .code-example} ::: iframe ::: :::

This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns. :::

Technical summary #

::: section-content

Content categoriesFlow content, phrasing content, palpable content
Permitted contentPhrasing content
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parentsAny element that accepts phrasing content
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesAny
DOM InterfaceHTMLElement
:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-abbr-element]{.small}

:::

Browser compatibility #

::: _table #

       Desktop                                                          Mobile                                           

       Chrome    Edge   Firefox             Internet   Opera   Safari   WebView   Chrome    Firefox   Opera     Safari   Samsung
                                            Explorer                    Android   Android   for       Android   on IOS   Internet
                                                                                            Android

abbr 2 12 1 7 15 4 4.4 18 4 14 3.2 1.0

                        Before Firefox 4,                                                                                
                        this element                                                                                     
                        implemented the                                                                                  
                        `HTMLSpanElement`                                                                                
                        interface instead                                                                                
                        of the standard                                                                                  
                        `HTMLElement`                                                                                    
                        interface.

:::

See also #

::: section-content

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr{._attribution-link} :::

Calendar December 2, 2023
Edit Edit this page