<abbr>

The HTML <abbr> element is used to represent an abbreviation or acronym. This can be helpful to add clarity and context to readers and assistive technologies by indicating the text is in an abbreviated form.

The title attribute can be added to <abbr> to provide the full expansion of the term, which browsers typically display as a tooltip when the user hovers over the element.

Syntax

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

Attributes

• title: The fully expanded version of the abbreviation. This is the most important attribute for this element.

Basic usage

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

<p>I'm learning <abbr title="HyperText Markup Language">HTML</abbr> 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

If an abbreviation is well-known and no expansion is required, <abbr> can be used without a title attribute. This can still be useful for semantic purposes, but it won't provide a tooltip.

<p>Documents must only be uploaded as a <abbr>PDF</abbr>.</p>

It is however recommended to use the title attribute for clarity where possible.

Accessibility and best practices

• Always include the title attribute: This is important for screen readers and users who are not familiar with the bbreviation.
• Don't overuse: Only use <abbr> for actual abbreviations or acronyms.
• Styling: As standard most browsers add a dotted underline to <abbr> elements. You can customize this with CSS.

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

This example uses the styles from above:

I'm learning HTML at learn-webdevelopment.com

Conclusion

The <abbr> element is a simple but effective element for providing clarity to abbreviations. Resulting in an improved user experience for everyone, especially for users of assistive technologies.