HTML <abbr> Tag

The <abbr> tag is used to define an abbreviation or an acronym. By using the <abbr> tag and providing a full description in the title attribute, you offer a tooltip that appears when a user hovers over the abbreviation. This improves accessibility and helps readers understand the meaning of shorthand terms used in your content.

Syntax

<abbr title="full description">abbreviation</abbr>

Attributes

Example

<p>The <abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>

More Examples

Basic Usage with Common Abbreviations

<p>I work for the <abbr title="National Aeronautics and Space Administration">NASA</abbr>.</p>
<p>Please refer to the <abbr title="World Health Organization">WHO</abbr> for more information.</p>
<p>My favourite programming language is <abbr title="JavaScript">JS</abbr>.</p>

Using <abbr> within Headers and Other Elements

<h1>Understanding <abbr title="Cascading Style Sheets">CSS</abbr></h1>
<p>This section will discuss <abbr title="Cascading Style Sheets">CSS</abbr> in more detail.</p>

<a href="#" title="Go to the detailed <abbr title='Hypertext Transfer Protocol Secure'>HTTPS</abbr> information">Learn about <abbr title="Hypertext Transfer Protocol Secure">HTTPS</abbr></a>

Multiple Abbreviations in a Paragraph

<p>I just got a new <abbr title="Central Processing Unit">CPU</abbr> for my <abbr title="Personal Computer">PC</abbr>. It's much faster now.</p>

Using it to display terms in a definition list

<dl>
    <dt><abbr title="Hypertext Transfer Protocol">HTTP</abbr></dt>
    <dd>The foundation of data communication for the World Wide Web.</dd>

    <dt><abbr title="Domain Name System">DNS</abbr></dt>
    <dd>The phonebook of the internet, mapping domain names to IP addresses.</dd>
</dl>

Browser Support

The <abbr> tag is supported by all major browsers, including:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Use the <abbr> tag for all abbreviations and acronyms on your website to improve accessibility and user experience.
• Always provide the full term in the title attribute, this will enable assistive technologies to better understand the content.
• Avoid using the <abbr> tag just for styling or as a substitute for other more appropriate HTML elements.
• The tooltip behaviour is consistent across most browsers, but its visual appearance might differ slightly depending on the user's operating system and browser settings.
• While the <acronym> tag existed in older HTML versions, it is no longer supported in HTML5. The <abbr> tag is now used for both abbreviations and acronyms.
• Use abbreviations and acronyms consistently throughout your content. It is better to include a definition at first appearance.
• The tag helps SEO as it gives context to short forms.