HTML Guides for abbr

In earlier versions of HTML, there were two separate elements for shortened forms of words and phrases: <abbr> for abbreviations (like “Dr.” or “etc.”) and <acronym> for acronyms (like “NASA” or “HTML”). The HTML5 specification eliminated this distinction because acronyms are simply a type of abbreviation. The <abbr> element now covers all cases.

Using the obsolete <acronym> element causes W3C validation errors and has several practical drawbacks:

• Standards compliance: The element is not part of the current HTML specification. Validators will flag it as an error, and future browsers are not guaranteed to support it.
• Accessibility: Assistive technologies are designed and tested against current standards. While many screen readers still handle <acronym>, relying on an obsolete element risks inconsistent behavior. The <abbr> element has well-defined, standardized accessibility semantics.
• Consistency: Using <abbr> for all abbreviations and acronyms simplifies your markup and makes it easier for developers to maintain.

The fix is straightforward: replace every <acronym> tag with <abbr>. The title attribute works the same way on both elements — it provides the expanded form of the abbreviation or acronym that browsers typically display as a tooltip on hover.

Examples

❌ Obsolete: using <acronym>

<p>The <acronym title="World Wide Web">WWW</acronym> was invented by Tim Berners-Lee.</p>

<p>This page is written in <acronym title="HyperText Markup Language">HTML</acronym>.</p>

✅ Fixed: using <abbr>

<p>The <abbr title="World Wide Web">WWW</abbr> was invented by Tim Berners-Lee.</p>

<p>This page is written in <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Using <abbr> for both abbreviations and acronyms

Since <abbr> now handles all shortened forms, you can use it consistently throughout your markup:

<p>
  Contact <abbr title="Doctor">Dr.</abbr> Smith at
  <abbr title="National Aeronautics and Space Administration">NASA</abbr>
  for more information about the <abbr title="International Space Station">ISS</abbr>.
</p>

Styling <abbr> with CSS

Some browsers apply a default dotted underline to <abbr> elements with a title attribute. You can customize this with CSS:

<style>
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }
</style>

<p>Files are transferred using <abbr title="File Transfer Protocol">FTP</abbr>.</p>

If you’re migrating a large codebase, a simple find-and-replace of <acronym with <abbr and </acronym> with </abbr> will handle the conversion. No other attributes or content changes are needed — the two elements accept the same attributes and content model.