Using HTML <abbr> tag to explain content

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.

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

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>