How to Create and Use Abbreviations in HTML

Our friend the <acronym> tag has been deprecated with the release of HTML5, so how does this affect the use of acronyms generated with HTML? Well, we have a new friend! The <abbr> tag joins the HTML element list with HTML5.

The acronym tag was used by wrapping opening and closing tags around a letter set, then inputting a string as a value for the title property. It looked like this:

<acronym title="United States of America">USA</acronym>

This example would display (in most cases) a dotted underline under the USA. Then if you hovered over the USA, a balloon tip (like anchor titles) would display under the cursor saying “United States of America.”

Acronym Tag Deprecated

What does the acronym tag being deprecated mean exactly? When a tag is deprecated it means that browser support may go away, so you should stop using it.

In the case of the acronym tag, if browser support goes away in future the balloon tip would not display because the browser wouldn’t know what to do with the tag, or the web designer didn’t take the acronym tag into consideration when developing the site.

This tag was deprecated with HTML5, however the abbreviation tag was created at the same time to offer the same functionality. Web designers need to ensure they honor the new HTML tag that replaced it.

Using the <abbr> Tag

The abbr tag is brand new, so does that mean you have to learn a completely different way of using it compared to the acronym tag? Negative. The new abbreviation tag functions exactly like the acronym tag did.

We start by wrapping <abbr> tags around our abbreviation.

<abbr>HTML</abbr>

Then we add the title property to the opening <abbr> tag, and define a string value for it. The title value is defining what to display in a tooltip when the user hovers of the text wrapped in the <abbr> tags.

<abbr title="Hyper Text Markup Language">HTML</abbr>

This generates the following:

HTML

Notice the dotted line under HTML, and the tooltip when you hover over it! Pretty cool right? Much like spelling bees, lets use it in a sentence:

<p>Today I learned a new <abbr title="Hyper Text Markup Language">HTML</abbr> tag!</p>
Today I learned a new HTML tag!

Why Use Abbreviation HTML Tags

Why you should use abbreviation tags? Is it just a bit more code to have to do to feel cool or have a cool tooltip? Well, not quite. There is a bit more reasoning behind using these tags.

“By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.”
w3schools.com

Screen-readers could also be added to that list as well. Honestly it is a seldom used practice to use these tags. But it is beneficial for the reasons that were just listed and good practice to keep ADA compliance.

According to the Mozilla Developer Network the <abbr> is supported by all the browsers both PC and mobile. Mobile browsers will display the balloon tip on-tap instead of on hover of course.

Styling the <abbr> Tag

So let’s talk about styling. Usually the complaint from people about using abbreviation tags is that it messes up the styling and look of the paragraph, and they can’t get rid of the dotted underline.

The fabled dotted line, and how to get rid of it, is usually the first point of discussion when it comes to styling the abbr tag. The styling text-decoration:none;, which would remove an underline, does not work in this case because the underline created by an abbreviation element in most browsers is actually a border!

Using our previous example:

Today I learned a new HTML tag!

We could remove the dotted line by adding border:none; to the style.

abbr {
border:none;
}
Today I learned a new HTML tag!

With that in-line styling we’ve taken care of that dotted underline. But now it looks exactly like the rest of the text, so you wouldn’t know that it is any different. What I would do is colorize it, like you would an anchor, but instead of an anchor object it becomes of a hover element. Simply target the element and give it a color property.

abbr {
border:none;
color:#05f;
}
Today I learned a new HTML tag!

A good design choice in terms of usability for the abbreviation tag is to change the color or cursor on hover. The abbreviation tag does not allow for CSS pseudo selectors, so you could not add an abbr:hover{} selector to your stylesheets. But you could add a different cursor effect on hover.

Changing the cursor is a really cool way to let the user know the element is not a link, but has an effect. If cursor:help; is added to the styling a neat hover effect is created.

abbr {
border:none;
color:#05f;
cursor:help;
}
Today I learned a new HTML tag!

Hopefully, with the examples and descriptions offered in this article, today you learned a new HTML tag and how to use it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s