<abbr>

The <abbr> tag is used to define an abbreviation or an acronym in HTML.

By providing a complete explanation through the title attribute, it improves accessibility and user experience by allowing readers (and search engines 😉) to better understand the meaning of the abbreviated terms.

For example, it can be used to indicate that "HTML" stands for "HyperText Markup Language".

Structure and Syntax of the <abbr> Tag

The <abbr> tag is an inline element that can be used around an abbreviated word or group of words.

Referring back to our previous example, here’s how it would look for the term HTML:

<p>The website is written in <abbr title="HyperText Markup Language">HTML</abbr>.</p>

When the cursor hovers over the abbreviated text, a tooltip displaying the value of the title attribute appears (if the browser supports this feature).

Try it yourself! 😬

Attributes

You simply need to use the title attribute to define the title to display around an acronym! Just like with links using the <a> tag in HTML.

Here’s another example for "CSS" and its full name "Cascading Style Sheets":

<abbr title="Cascading Style Sheets">CSS</abbr>

Browser Compatibility

The <abbr> tag is supported by all modern browsers.