Highlighting Abbreviations in HTML with the〈abbr〉Tag

Use-Cases of this Tutorial

  • You are looking to know the correct tag for specifying abbreviations in HTML pages
  • You are looking to know about the HTML Abbreviation element <abbr>

The <abbr> element is the standard markup element used to highlight abbreviated terms in a webpage.

<p><abbr>CSS</abbr> is used to stylize a web page.</p>

<abbr> can have an optional title attribute which represents the full description of the abbreviation. This title will be shown if the user hovers over the abbreviation.

<p><abbr title="Hyper Text Markup Language">HTML</abbr> is a markup language for web pages.</p>

Using standard / semantic markup elements in HTML makes it possible for automated bots and scripts (web crawlers for example) to get a sense of the webpage. The abbreviated term represented by <abbr> can be better understood by bots.