Using HTML <abbr> tag to explain content

B

4

23

Is it bad form to use the <abbr> tag to explain words that are not actually abbreviations but to produce a "hover over" explanation of content?

If it is, why is it bad form, and what is a good HTML alternative?

Biomass answered 12/8, 2012 at 2:38 Comment(1)

You mean "bad" as in if it affects your SEO? – Dominga 5/10, 2019 at 6:24

N

22

You actually don't need to use the <abbr> tag to use the title= attribute. You can apply it to many things, including <span> tags.

Example of use:

<span title="This is my explanation here.">Confusing text</span>

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

In other words, you'll provide misleading information to search engines when there is no reason to, by incorrectly using the <abbr> tag.

Netty answered 12/8, 2012 at 2:56 Comment(1)

Be aware that assistive technology like screen readers do not generally announce the title attribute – Accusative 12/8, 2012 at 3:2

N

2

Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom and help cursor:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>You can use <abbr title="Cascading Style Sheets" class="text-info font-italic initialism">CSS</abbr> to style your <abbr title="HyperText Markup Language" class="text-info font-italic initialism">HTML</abbr>.</p>

Novak answered 23/1, 2019 at 14:50 Comment(0)

G

1

If you want the Search Engines to understand your content better, you should use the tag for explaining confusing text inside your webpage.

It is not evil to use it only for designing purposes, but if a browser has no support for it your users will suffer. For general use, a simple <span title="Explanation">Abbr</span> works better; of course you will need to add some styles with a beautiful CSS rule ;)

Gauche answered 21/2, 2013 at 5:1 Comment(0)

H

-1

The HTML element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

like

<p> <abbr title="Unknown Flying Object"> UFO </abbr>

Hbeam answered 19/3, 2015 at 15:15 Comment(1)

That was no answer to the question. – Confide 2/4, 2015 at 20:12

Recommended topics

Hot tags