HTML <abbr> Tag

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 5 Examples
Semantic HTML
HTML abbr tag tutorial — marking up abbreviations and acronyms
Overview

What You’ll Learn

By the end of this tutorial, you’ll confidently mark up abbreviations and acronyms in real-world HTML projects.

01

Core Syntax

Write valid <abbr> elements with the short form visible and the expansion in title.

02

title Attribute

Provide the full expanded form for tooltips and assistive technologies.

03

Common Use Cases

Mark up technical terms, acronyms, and unfamiliar shortenings in running text.

04

CSS Styling

Customize the dotted underline and hover states while keeping tooltip cues visible.

05

abbr vs acronym

Understand why HTML5 replaced <acronym> with a single <abbr> element.

06

Production Tips

Apply accessibility and semantic HTML best practices used on professional sites.

Fundamentals

What Is the <abbr> Tag?

The abbreviation element (<abbr>) is an inline HTML tag used to mark up shortened forms of words and phrases. Browsers typically render it with a dotted underline to signal that extra information is available on hover or focus.

💡
Semantic, not just styled text

Using <abbr> tells search engines, parsers, and assistive technologies that the wrapped text is a shortened form—not arbitrary styling. Pair it with a meaningful title attribute for the full expansion.

The element is inline, so it flows naturally inside paragraphs, headings, and lists. The visible text is the abbreviation itself (e.g. HTML, CSS, PNG), while the optional but strongly recommended title attribute holds the long form.

Foundation

📝 Syntax

Wrap the abbreviation inside <abbr> and set title to the full expanded form:

abbr.html
<!-- Basic abbr syntax -->
<abbr title="World Wide Web">WWW</abbr>

Syntax Rules

  • The visible text should be the commonly known short form (e.g. HTML, not the full expansion).
  • title holds the full expanded form and powers the native browser tooltip.
  • <abbr> is an inline element—it can appear inside paragraphs, lists, and headings.
  • Self-closing syntax (<abbr />) is not valid in HTML.
complete-example.html
The <abbr title="HyperText Markup Language">HTML</abbr> document structure is fundamental to web development.
Cheat Sheet

⚡ Quick Reference

Use CaseCode SnippetResult
Basic abbreviation<abbr title="World Wide Web">WWW</abbr>WWW
Technical acronym<abbr title="HyperText Markup Language">HTML</abbr>HTML
File format<abbr title="Portable Network Graphics">PNG</abbr>PNG
API term<abbr title="Application Programming Interface">API</abbr>API
With lang hint<abbr lang="fr" title="Organisation...">ONU</abbr>Hover for French expansion
Default browser style<abbr title="...">CSS</abbr>Dotted underline + tooltip
Reference

🧰 Attributes

The <abbr> tag has a small API—one meaningful attribute plus standard global attributes:

title Required*

The full expanded form of the abbreviation. Browsers show it as a tooltip on hover; screen readers may announce it on focus.

title="Cascading Style Sheets"
id / class Global

Standard global attributes for styling, scripting, and anchor targets.

<abbr class="tech-term" ...>
lang Optional

Hints the language of the abbreviation or its expansion when it differs from the page language.

lang="fr"
aria-* A11y

Supplement with ARIA when tooltips alone are insufficient—but prefer clear prose and a good title first.

aria-label="HyperText Markup Language"

* title is not strictly required by the HTML spec, but omitting it removes the tooltip and hurts accessibility. Always provide a meaningful expansion in production.

Hands-On

Examples Gallery

Real-world abbreviation patterns with copy-ready code, live previews, and hands-on practice. Hover over abbreviations in the output to see tooltips.

Basic Syntax

The simplest use: wrap an abbreviation and set title to its full form. The browser shows the short text and reveals the expansion on hover.

basic-syntax.html
<abbr title="World Wide Web">WWW</abbr>
Try It Yourself

title Attribute

The title attribute is the heart of the <abbr> tag. It stores the full expanded form and displays it as a native browser tooltip on mouse hover.

title-attribute.html
<abbr title="Cascading Style Sheets">CSS</abbr>
Try It Yourself

📚 Common Use Cases

Here are the most frequent ways developers use the <abbr> tag in real projects.

Standard Abbreviations

The primary use of <abbr> is marking up standard abbreviations and acronyms within running text. This enhances both accessibility and understanding without disrupting the reading flow.

standard-abbreviations.html
The <abbr title="HyperText Markup Language">HTML</abbr> document structure is fundamental to web development.
Try It Yourself

Tooltips for Clarity

By incorporating the title attribute, <abbr> offers an informative tooltip, ensuring users can quickly grasp the full meaning of an unfamiliar abbreviation without leaving the page.

tooltips-for-clarity.html
<abbr title="Portable Network Graphics">PNG</abbr> is a widely used image format on the web.
Try It Yourself

Multiple Abbreviations

You can use several <abbr> elements in the same paragraph. Each carries its own title with the correct expansion—ideal for technical articles and documentation.

multiple-abbreviations.html
Learning <abbr title="HyperText Markup Language">HTML</abbr> and
<abbr title="JavaScript">JS</abbr> along with
<abbr title="Cascading Style Sheets">CSS</abbr> is essential for web development.
Try It Yourself
History

🔄 <abbr> vs <acronym>

HTML4 introduced a separate <acronym> tag for pronounceable acronyms (e.g. NASA) and kept <abbr> for shortenings like “etc.” In HTML5, <acronym> was removed. Use <abbr> for all abbreviations and acronyms today.

<abbr> HTML5

Use for all abbreviations and acronyms: HTML, CSS, NASA, API, etc.

<abbr title="National Aeronautics and Space Administration">NASA</abbr>
<acronym> Deprecated

Removed from HTML5. Replace any legacy <acronym> tags with <abbr> in modern documents.

<!-- Do not use in new HTML -->
Design

Styling <abbr> with CSS

Browsers apply a default dotted underline to <abbr>. Customize it to match your design while keeping a visual cue that a tooltip exists:

default Dotted underline
:hover Color change
:focus-visible Keyboard focus
cursor: help Tooltip hint
abbr-styles.css
/* Base abbreviation */
abbr {
  cursor: help;
  border-bottom: 1px dotted #64748b;
  text-decoration: none;
}

/* Hover */
abbr:hover {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

/* Keyboard focus */
abbr:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Live styled abbreviations — hover to see tooltips

HTML CSS PNG API WWW

🧠 How <abbr> Works

1

Author marks up the short form

Wrap the abbreviation in <abbr> and set title to the full expansion.

Markup
2

Browser renders with a hint

The short form appears inline. Most browsers add a dotted underline to signal that more info is available.

Display
3

User hovers or focuses

A native tooltip shows the title value. Screen readers may announce the expansion on focus.

Interaction
=

Clearer, more accessible content

Readers understand unfamiliar terms without cluttering the page. Search engines and assistive tech gain semantic context from the markup.

Compatibility

Universal Browser Support

The <abbr> tag is supported in every modern browser and all legacy browsers including Internet Explorer. No polyfills or fallbacks are needed.

✓ Baseline · Since HTML 4

Works everywhere your users are

From legacy Internet Explorer to the latest Chromium builds — the abbreviation element is a universally supported part of semantic HTML.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support

Tooltip behavior notes

The tag works everywhere; tooltip interaction varies slightly by device.

📱
title on touch devices Tooltips may require a long-press; don’t rely on them alone for critical info
Partial
♿
Screen reader support Behavior varies by AT; spell out on first use in prose when possible
Varies
<abbr> tag 100% supported

Bottom line: Ship abbreviation markup with confidence. The core <abbr> element is safe to use in every production environment today.

Wrap Up

Conclusion

Mastering the <abbr> tag is essential for writing accessible, semantic HTML. Wrap unfamiliar abbreviations, always provide a meaningful title, and use <abbr> instead of the deprecated <acronym>.

Your readers—and search engines—will thank you for the added clarity. Use the quick reference above and experiment until abbreviation markup becomes second nature.

View Quick Reference Explore Related Topics
Pro Tips

💡 Best Practices

✅ Do

  • Always include the title attribute with the full expanded form
  • Use <abbr> for standard abbreviations and acronyms to add semantic meaning
  • Keep the visible text as the commonly known short form (HTML, not HyperText Markup Language)
  • Style with a dotted underline or cursor: help so users know a tooltip exists
  • Use <abbr> for technical terms your audience may not know
  • Replace any legacy <acronym> tags with <abbr>

❌ Don’t

  • Omit the title attribute—it removes the tooltip and hurts accessibility
  • Wrap every casual shortening (e.g. “info”, “apps”) unless the expansion adds value
  • Use <abbr> when the full form is already written nearby in the same sentence
  • Rely on tooltips alone for critical information—consider spelling out on first use in prose
  • Use the deprecated <acronym> tag in new HTML5 documents
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <abbr>

Bookmark these before you ship — they’ll make every abbreviation you write clearer and more accessible.

6
Core concepts
📝 01

Semantic Short Forms

<abbr> marks abbreviations and acronyms inline — not just styled text.

Foundation
💬 02

title Holds the Expansion

The title attribute stores the full expanded form shown as a native tooltip.

Essential
👀 03

Hover for Clarity

Sighted users see the expansion on hover; keep a dotted underline as a visual hint.

UX
🔄 04

Replaces <acronym>

HTML5 removed <acronym>. Use <abbr> for all shortenings today.

HTML5
♿ 05

Accessibility Wins

Screen readers may announce the title value — always provide an accurate expansion.

A11y
🌐 06

Universal Support

Supported in every browser including IE. No polyfills or fallbacks required.

Compatibility
🎯 You’re ready to write accessible abbreviation markup
Review Quick Reference →

❓ Frequently Asked Questions

The <abbr> element marks up abbreviations and acronyms. Use the title attribute for the full form, shown as a tooltip on hover and available to screen readers.
Not strictly required by spec, but strongly recommended. Without title, users lose the tooltip and assistive technologies may only read the short letters.
<acronym> was removed in HTML5. Use <abbr> for all abbreviations and acronyms, whether pronounceable (NASA) or not (etc.).
No. Only mark up terms that may be unfamiliar. Common shortenings like “app” rarely need <abbr>. Use it for technical terms like HTML, API, or PNG.
Many screen readers announce the title value when the element is focused. Provide a clear, accurate expansion for the best experience.
Yes. Target abbr in your stylesheet to change the underline, color, or cursor. Keep a visual hint that a tooltip is available.

Practice in the Live Editor

Open the HTML editor, add abbreviation markup, and see tooltips in the preview instantly.

HTML Editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML a Tag HTML acronym Tag