A Short Guide: The abbr HTML Element

Today we will look at a simple but valuable HTML tag that I rarely see used: the <abbr> element.

This element might seem minor, but it's a great tool to enhance the readability and accessibility of your web content.

Let's get into it!

What is the <abbr> Element?

The <abbr> element defines an abbreviation or acronym in HTML.

When you use this element, most browsers display a tooltip with the full explanation when a user hovers over the abbreviation.

Using the <abbr>, element helps enhance the user experience by providing immediate explanations for acronyms or abbreviations.

It can also make your content more accessible to screen readers. And heck, we should always strive for more accessibility!

Example: Using the <abbr> Element

Let's say you're writing an article about the "World Health Organization" and want to use the abbreviation "WHO." Here's how you can use the <abbr> element:

<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations responsible for international public health.</p>

In this example, if a user hovers their mouse over "WHO," they will see a tooltip that says "World Health Organization."

Here's a CodePen so you can try it out:

As you can see, it's a simple and effective tool to make your web content more understandable and accessible.

Happy coding! ✌️

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉