HTML abbr Tag - Learn HTML

The HTML <abbr> tag marks up an abbreviation or acronym — a shortened form of a word or phrase, such as HTML, CSS, Mr., Dec., ASAP, or ATM. By wrapping the short form in <abbr> and supplying its full expansion through the title attribute, you turn a meaningless string of letters into a piece of self-describing, machine-readable content.

This page explains what <abbr> is for, why it matters for accessibility and SEO, how the title attribute behaves (and where it falls short), and the best practices for using it correctly.

Why `<abbr>` matters

Visually, <abbr> does very little — at most, some browsers add a faint dotted underline. Its real value is semantic: it tells software, not just sighted readers, that a piece of text is an abbreviation and what it stands for.

Screen readers. Assistive technology can announce the expansion in the title attribute, or read the abbreviation in a way that suits the user's settings. This helps people who can't see a hover tooltip understand acronyms like WCAG or ARIA.
Search engines and other tools. Marking up abbreviations gives crawlers, translation tools, and indexers extra context about what your shortened terms actually mean.
Non-native and new readers. A reader who doesn't recognize ASAP or a domain-specific acronym gets the full meaning instead of being left to guess.

In short, a plain HTML is just four letters; <abbr title="HyperText Markup Language">HTML</abbr> is four letters plus their meaning, available to humans and machines alike.

Syntax

The <abbr> tag comes in pairs. The content is written between the opening (<abbr>) and closing (</abbr>) tags.

Example of the HTML `<abbr>` tag:

HTML <abbr> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
  </body>
</html>

Try it Yourself »

Result

The `title` attribute

The <abbr> tag has no required attributes, but the title attribute is what makes it useful. Put the full, expanded form of the abbreviation in title:

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>

On desktop browsers, hovering the mouse over the abbreviation shows the expansion as a tooltip. Screen readers may also expose the title value to users.

Limitations of `title`

The title tooltip is convenient, but you should not rely on it as the only way users discover the expansion:

It only appears on mouse hover. Touchscreen users (phones, tablets) and keyboard-only users generally cannot trigger it.
Its display is inconsistent across screen readers and is not guaranteed to be announced.

Because of this, the Web Content Accessibility Guidelines (WCAG success criterion 3.1.4 Abbreviations) recommend that you also spell out the abbreviation in the surrounding text on its first use, then use the short form afterwards:

<p>
  The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
  Consortium) develops web standards. The W3C also maintains the HTML
  specification.
</p>

This way the meaning is available to everyone — not just users who can hover.

Attributes

The <abbr> tag supports the Global Attributes and the Event Attributes. The most important of these is the global title attribute, described above.

How to style an HTML `<abbr>` tag

By default, some browsers display a dotted underline under <abbr> content, but the styling is not consistent — for example, older versions of some browsers showed no underline at all. To get a reliable, predictable look, style it yourself with CSS. A common pattern is a dotted bottom border plus a help cursor to hint that hovering reveals more:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      abbr {
        text-decoration: none;
        border-bottom: 1px dotted #000;
        cursor: help;
      }
    </style>
  </head>
  <body>
    <p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
  </body>
</html>

Result

When to use `<abbr>` and best practices

Use <abbr> whenever a shortened form might not be understood by every reader, especially the first time it appears in your content.

Always provide a title with the full expansion. An <abbr> with no title adds little value.
Spell out the term on first use in the visible text (WCAG 3.1.4), then use the abbreviation afterwards. Don't make the title tooltip the only source of the meaning.
Keep the title to the expansion only — write World Wide Web Consortium, not a full sentence of explanation.
Don't over-mark. You don't need to wrap every instance of a well-known abbreviation on a page; marking the first occurrence is usually enough.
Use it for acronyms too. Modern HTML has no separate acronym element — <abbr> covers both abbreviations and acronyms.

Browser support

The <abbr> element is supported by all modern browsers. Note that the default appearance varies: some browsers render a dotted underline, others render nothing visible at all. If a consistent visual cue matters to you, apply your own CSS as shown above rather than relying on the browser default.

<acronym> — the obsolete element for acronyms; use <abbr> instead.
<dfn> — marks the defining instance of a term.
<cite> — references the title of a creative work.

Practice

What is the function of the <abbr> tag in HTML?

It is used to indicate an abbreviation or acronym.It is used to create a hyperlink.It provides a tooltip when one hovers over the enclosed text.It is used to define a section in a document.

Why <abbr> matters

Syntax

Example of the HTML <abbr> tag:

The title attribute

Limitations of title