The
<abbr>tag in HTML defines an abbreviation or acronym, such as “HTML,” “CSS,” or “NASA.”
When a user hovers over the abbreviation, the browser displays the full form (if provided using thetitleattribute).
This helps improve accessibility, readability, and SEO by clarifying shortened terms.
Syntax
<abbr title="Full Form">Abbreviation</abbr>Attributes
| Attribute | Description |
|---|---|
title | Specifies the full form or description of the abbreviation (displayed as a tooltip). |
class | Adds one or more class names for styling. |
id | Provides a unique identifier for the element. |
style | Defines inline CSS styles. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Abbr Tag Example</title>
<style>
abbr {
cursor: help;
}
</style>
</head>
<body>
<h1>HTML <abbr> Tag Example</h1>
<p>
The term <abbr title="HyperText Markup Language">HTML</abbr> is used to create the structure of web pages.
</p>
<p>
<abbr title="Cascading Style Sheets" id="css" class="highlight" style="color: #2c3e50;">CSS</abbr> controls the design and layout of web pages.
</p>
</body>
</html>Output
Browser Output
Use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
When you hover over the abbreviation, a tooltip displays the full form.
Notes
- The
titleattribute is essential for meaningful use of<abbr>. - Screen readers announce the abbreviation’s expansion, improving accessibility.
- The dotted underline can be customized or removed using CSS.
- The tag is inline and does not break text flow.
Conclusion
The <abbr> tag makes content more accessible and user-friendly by providing definitions for shortened terms.
It enhances understanding, especially for technical and academic content, while improving SEO and usability.
