HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

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 the title attribute).
This helps improve accessibility, readability, and SEO by clarifying shortened terms.

Syntax

html

<abbr title="Full Form">Abbreviation</abbr>

Attributes

AttributeDescription
titleSpecifies the full form or description of the abbreviation (displayed as a tooltip).
classAdds one or more class names for styling.
idProvides a unique identifier for the element.
styleDefines 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>

Output

Browser Output

html

Use our TryIt Editor to see the output.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

When you hover over the abbreviation, a tooltip displays the full form.

Notes

  • The title attribute 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.

PreviousHTML <cite> TagNextHTML <address> Tag