HTML abbr Tag

The <abbr> tag in HTML is used to represent abbreviations and provides additional information about them through the title attribute, which displays a tooltip when hovered over. It helps improve accessibility and SEO by offering context for the abbreviated text.

It makes text clearer by explaining abbreviations.
Improves accessibility with helpful tooltips.
Works with global and event attributes for flexible use.

Syntax:

<abbr title=""> Short form </abbr>

title: Displays the full form as a tooltip when hovering over the abbreviation.

HTML

<!DOCTYPE html>
<html>
<body>
    <p>
        <!-- HTML abbr tag is used here -->
        <abbr title="GeeksforGeeks">GFG</abbr>: A computer science portal for geeks.
    </p>
</body>
</html>

The <abbr> tag defines the abbreviation "GFG" with the full form "GeeksforGeeks" provided in the title attribute.
When users hover over "GFG," a tooltip displaying "GeeksforGeeks" appears, offering clarity.

Examples of HTML abbr Tag:

Abbr Tag for Representing HTML

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>HTML abbr Tag</h2>
    <p>
        <abbr title="Hyper Text Markup Language">HTML</abbr> 
        is used to create the structure of a web page.
    </p>
</body>
</html>

The <abbr> tag defines the abbreviation "HTML" with its full form provided in the title attribute.
Hovering over "HTML" displays the tooltip "Hyper Text Markup Language," offering clarity to users.

Styling Abbr Tag

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <style>
        abbr {
            color: #007BFF;
            font-weight: bold;
            font-size: 1.1em;
            border-bottom: 1px dashed #007BFF;
        }
        
        abbr:hover {
            text-decoration: none;
            color: #0056b3;
            cursor: pointer;
        }
    </style>
    <p>
        <abbr title="Cascading Style Sheets">CSS</abbr> 
        is used to style web pages.
    </p>
</body>
</html>

The abbr tag is styled with bold text, increased font size, and a dashed underline to make it visually distinct.
On hover, the underline is removed, the text color darkens, and a pointer cursor is displayed for better interaction.

Best Practices for Using the <abbr> Tag

Always include the title attribute to provide the full expansion of the abbreviation.
Use the <abbr> tag for both abbreviations and acronyms to enhance semantic meaning.
Ensure the abbreviation is necessary and widely recognized to avoid confusion.

Syntax:

Abbr Tag for Representing HTML

Styling Abbr Tag

Best Practices for Using the <abbr> Tag

Explore