# The “acronym” element is obsolete. Use the “abbr” element instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-acronym-element-is-obsolete-use-the-abbr-element-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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>`

```html
<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>`

```html
<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:

```html
<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:

```html
<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.
