HTML Tags
HTML <abbr> Tag
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
html
<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
html
<!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>Browser Support
Chrome | Edge | Firefox | 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.