We all know what is an acronym right? It is an abbreviation formed from the initial letters of a longer phrase. Say you use an acronym in your webpage but the user wants to know the expansion too. That’s when the acronym tag comes in handy.
Let’s hurry up and start!
Difficulty level: Very basic
Now let’s see the basic definition, syntax, and some examples for the same. This tag is no longer in use, and so we will see the alternatives for this tag.
The <acronym> tag in HTML defines the acronym. In real life, we define acronym as “spelled out the short form of the abbreviation“. The same goes for this too. The <acronym> tag spells out another word. It is used to give useful information to browsers, translation systems, and search-engines.
<acronym> tag is used with title attribute to contain a full explanation of an acronym content. When you hover the mouse on content, then it will show the explanation of word.
The <acronym> element and title attribute was used to associate a full-text explanation with an acronym.
These are some definitions of <acronym> tag.
The syntax for <acronym> tag is as follows,
<acrnonym attribute> ...(short form) </acronym>
As far the specifications,
|Tag||Both start and end tag is mandatory|
Let’s see what other attributes this tag supports or whether it has its own attributes.
Global attributes are nothing but the attributes that can be used throughout the program. This element has global attributes.
The <acronym> tag doesn’t have any specific attributes.
The <acronym> tag implements the HTMLElement interface.
Some of the web browser which supported the <acronym> tag while it was in use are,
- Google Chrome
- Internet Explorer
This tag is used only for the convivence of the author. Even still, the default styling varies from browser to browser.
- For example browsers like Internet Explorer do not style it differently. It styles it like an ordinary <span> element.
- Opera, Firefox, Chrome, and some other browser add a dotted underline to the content of the element.
- When the browser adds the dotted underline, it also adds a caps symbol to it. To avoid this, add font-variant: none in the CSS. The CSS takes care of this.
It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation.
Let’s see some examples.
<!DOCTYPE html> <html> <head> <title>Acronym tag</title> </head> <body> <h2>Acronym tag Example</h2> <acronym title="Absent Without Official leave">AWOL</acronym> </body> </html>
This is how the output looks like when you run the code. It shows only the short form. Only when you move the mouse over the word the expansion appears. See the picture below for reference.
<!DOCTYPE html> <html> <head> <title>Acronym tag</title> </head> <body> <h2>Acronym tag Example</h2> <acronym title="Indian Space Research Organisation">ISRO</acronym> <acronym title="World Health Organisation">WHO</acronym> </body> </html>
NOTE: As we discussed earlier in the output you can see the dotted line below the acronym.
Deprecation of tag
It is better to not use the <acronym> tag anymore. Though some browser, (by some browsers I mean very little) may support it, it might be on the verge of dropping out. Or this feature may have been not in relevant web standards. The only reason why some browsers keep it for compatibility. HTML5 doesn’t support this feature anymore. Most modern browsers use HTML5 so using this tag is not a very good idea.
DO NOT USE THIS TAG IN MODERN BROWSERS.
<acronym> tag is used when we want to provide an expansion for a short form.
Acronym tag follows the syntax <acronym title=” “>Short form</acronym>
We have discussed the details regarding the <acronym> tag. Though it is deprecated now, it is no harm in gaining knowledge, right? Keep growing by learning and happy coding!