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>