What is the Abbr Element? | HTML Interview Questions

What You'll Learn

Using the abbr element
Title attribute for expansion
Accessibility benefits

The Abbr Element

The <abbr> element marks abbreviations or acronyms. The title attribute provides the full expansion, which appears as a tooltip on hover.

Examples

index.htmlHTML

<!-- Basic abbreviation -->
<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

<!-- Technical terms -->
<p>This page uses <abbr title="HyperText Markup Language">HTML</abbr>
   and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

<!-- API and JSON -->
<p>The <abbr title="Application Programming Interface">API</abbr>
   returns <abbr title="JavaScript Object Notation">JSON</abbr> data.</p>

Styling

styles.cssCSS

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

Accessibility

Screen readers can announce both the abbreviation and its expansion.