Menu
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?
931
The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
The <abbr> tag(Abbreviation) in HTML is used to define the abbreviation or short form of an element. The <abbr> and <acronym> tags are used as shortened versions and used to represent a series of letters. The abbreviation is used to provide useful information to the browsers, translation systems, and search-engines.
HTML 5 <abbr> TagThe HTML <abbr> tag is used for indicating an abbreviation. This tag is often used in conjunction with the global title attribute in order to provide an expansion of the abbreviation.
Definition of 'abbr' 1. abbreviated.
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.
84
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
