Using HTML <abbr> tag to explain content

Question

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?

Answer 1

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.

Answer 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>

Answer 3

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 ;)

Answer 4

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>