# Abbreviate Your Code with HTML abbr Tag

Semantic HTML is a great way to convey meaning of your page. Mark up abbreviated content with the <abbr> tag. And when you pass a title, it will create a tooltip when hovered over. Nice! 👏

<abbr title="Today I learned">TIL</abbr> something awesome!

Default Styling
Styling abbr Tag
Battle between abbr VS acronym ⚔️
Mixing abbr with dfn
Why Semantic HTML is important
Display HTML abbr on Mobile
Browser Support
Community Input
Resources

# Default Styling

The default styling of <abbr> varies a bit from different browsers. In Chrome and Firefox, it will have an underline and when hovered it will a tooltip of the title value you passed.

TIL something awesome!

If you open this page on Safari, there will be no underline. Also, the underline is only present if you have a title attribute.

# Styling abbr Tag

With its unique tag, it also makes customization styling very easy. You can do something like this

abbr {
  text-decoration: underline blue dotted;
  color: blue;
}

abbr:hover {
  cursor: help;
}

Hover me to see my custom help (?) cursor

Because of the cross-browser variations, I would recommend that you impose a custom styling for your <abbr> tag. That way you will have a consistent look between browsers 🤓

# Battle between `abbr` VS `acronym` ⚔️

Back in 1997, there was this fierce debate about acronym vs abbr. The war began when Netscape created the <abbr> tag and Microsoft had the <acronym>. No side wanted to budge! And our mediator, W3C, refused to interfere and take a stand. The battle continued for many years, leading many developers confused and unsure which to use. Microsoft seems to have an edge with its dominating Internet Explorer presence. But then HTML5 landed...

W3C finally decided to step in and said, "Nobody wins when the family feuds, We all lose when the family feuds, What's better than one billionaire? Two" ... Opps, sorry that was the lyrics to Jay Z's Family Feuds, but I'm pretty sure it was along that lines 😂

Anyways, long story short! <acronym> is deprecated, so use <abbr> 👍

# Mixing `abbr` with `dfn`

When you are defining a term, you can wrap it in the <dfn> tag. So if you're using an abbreviation plus you're explaining it, you can mix these tags like this:

<p>
  <dfn>
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </dfn>
  is the standard markup language for documents designed to be displayed in a
  web browser.
</p>

HTML is the standard markup language for documents designed to be displayed in a web browser.

# Why Semantic HTML is important

Semantic HTML is important because it allows you to convey meaning of your code. I remember when I first started learning programming, I'd just wrap all my text in <div> and then use CSS to apply the correct styling. For a visual person, it made no difference. The user would see what I want them to see 🤷‍♀️

But wrapping everything in a <div> tag, even with styling, means nothing for a machine. So that means a machine such as a screen reader would not know how to take your text and properly communicate your content for a visually impaired person. Nor would a search engine bot, think SEO, know how to crawl your content, and properly rank your site. By the way, noticed what I did there, I wrapped my SEO in an <abbr> tag 😉 That's right! Got to always be applying them knowledge 😎

As developers, it is our job to ensure our website or app is inclusive for everyone. And the way to do that is to use the proper semantic HTML tag 💛 Just like if you're a restaurant, you wouldn't turn away paying customers 😆 (that's right, it's all about the money! Utility ain't paying themselves 🤑)

# Display HTML abbr on Mobile

So far, I got you all pumped about using the HTML <abbr>. It's semantic and it has a nice tooltip when hovered. Before you break the champagne out...there is a little problem 😅

The problem is with Mobile. The hover works great on desktop where there is a pointing device. But once you switch over to a mobile device, the hover tooltip won't work. But no worries! I found some creative solutions 👏

# Solution 1: Display Non-abbreviated Term

Here's a very simple solution. Let's just display the full non-abbreviated term once they're at a smaller screen size.

<abbr title="Today I learned">TIL</abbr>

And with CSS, we take the non-abbreviated term indicated in the title attribute and output it on our page in brackets.

abbr[title]::after {
  content: ' (' attr(title) ')';
}

TIL 👈 The non-abbreviation is displayed

And we can also use media queries to get rid of the non-abbreviated term once it hits a bigger screen size.

@media screen and (min-width: 992px) {
  abbr[title]::after {
    content: '';
  }
}

Credit: Aurelio De Rosa

# Solution 2: Display Non-abbreviated Term with Tap

It's nice that we display the non-abbreviated term on smaller screen sizes. But we all know how real estate is even more previous on mobile devices, so we might not want to clog our screen with unnecessary text. In that case, we can utilize our hover state to only show the non-abbreviated term only when tapped.

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}

TIL

☝️Desktop: hover to see non-abbreviation

☝️Mobile: tap to see non-abbreviation

We can even further improve on this by including keyboard support. We can indicate the abbr tag is focusable in sequential keyboard navigation with tabindex="0" and then trigger our non-abbreviated content when focused.

<abbr title="Today I learned" tabindex="0">TIL</abbr>

abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}

TIL

☝️Use the tab key OR click to trigger focus

Credit: Ire Aderinokun

Instead of using CSS, you can also simply use JavaScript to trigger a tooltip. If you're using Bootstrap, you can use the Tooltips component.

It definitely would be nice if there was a native solution to address the <abbr> issues in mobile or non-pointing device. Unfortunately at this time, there isn't 😔. But semantic HTML is still very important and as developers, we need to do our best to use it whenever possible. For now, we just have to understand the issues and use our creative juices to work around it. Semantic HTML all the way!!! 🏆