15. abbr Element
Introduction
Section titled “Introduction”The <abbr> element represents an abbreviation or acronym. It helps users understand abbreviations by providing a full expansion via the title attribute. The abbr element improves accessibility and user experience, especially for technical terms and acronyms.
Basic Usage
Section titled “Basic Usage”<p>The <abbr title="World Wide Web">WWW</abbr> is part of the internet.</p>With title Attribute
Section titled “With title Attribute”Always include the full expansion:
<p> <abbr title="HyperText Markup Language">HTML</abbr> is a markup language.</p>Common Use Cases
Section titled “Common Use Cases”Acronyms
Section titled “Acronyms”<p> <abbr title="Cascading Style Sheets">CSS</abbr> styles HTML documents.</p>Technical Terms
Section titled “Technical Terms”<p> Use <abbr title="Application Programming Interface">API</abbr> for data access.</p>Multiple Abbreviations
Section titled “Multiple Abbreviations”<p> <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> work together.</p>Browser Behavior
Section titled “Browser Behavior”Browsers typically:
- Underline abbreviations (dotted underline)
- Show title on hover
- Help screen readers announce expansions
Best Practices
Section titled “Best Practices”Always Include title
Section titled “Always Include title”Provide full expansion:
<!-- Good: With title --><p><abbr title="HyperText Markup Language">HTML</abbr></p>
<!-- Avoid: Without title --><p><abbr>HTML</abbr></p>First Occurrence
Section titled “First Occurrence”Mark first occurrence, not every instance:
<!-- Good: First occurrence --><p>Learn <abbr title="HyperText Markup Language">HTML</abbr>.</p><p>HTML is essential for web development.</p>
<!-- Avoid: Every occurrence --><p>Learn <abbr title="HyperText Markup Language">HTML</abbr>.</p><p><abbr title="HyperText Markup Language">HTML</abbr> is essential.</p>