<acronym>

📝 Note: Use the <abbr> element instead.

The HTML <acronym> element is used to represent a abbreviation or acronym. Providing clarity and context both readers and assistive technologies by indicating the contents is an acronym. For abbreviations, the <abbr> element should now be used.

The abbreviated term can be expanded when hovering over by using the title attribute, which browsers typically display as a tooltip.

Syntax

<acronym title="HyperText Markup Language">HTML</acronym>

Attributes

• title: The full expansion of the acronym. This is the most important attribute for this element.

Basic usage

Here is a basic example of using the <acronym> element:

<p>I'm learning <acronym title="HyperText Markup Language">HTML</acronym> at learn-webdevelopment.com.</p>

Hover over the HTML text to see the title appear as a tooltip:

I'm learning HTML at learn-webdevelopment.com.

Using without title

Some well known acronym may not need expanded, and you can use the <acronym> element without the title attribute. This can still be useful for semantic purposes, but no tooltip is displayed on hover.

<p>Only <acronym>PDF</acronym> documents are accepted.</p>

However, it's generally recommended to use the title attribute for clarity.

Accessibility and best practices

• Always include the title attribute: This is important for uses who are unaware of the acronym, along with screen reader technologies.
• Don't overuse: Only use <acronym> for actual acronyms and not to create tooltips etc.
• Styling: By default, most browsers add a dotted underline to <acronym> elements, which can be customized with CSS.

acronym[title] {
  text-decoration: none;
  cursor: help;
}

Conclusion

Although now not recommended, the <acronym> element was previously used to make abbreviations/acronyms more accessible and understandable. The <abbr> element can now be used in it's place.