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.

• 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

• 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

• 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.