HTML abbr Tag

HTML 5 has interesting features that make designing HTML web pages simpler using minimal writing of code. It provides a rich set of interesting tags to design web elements. One such tag is useful, which is known as tag. This tag is used to define and display an abbreviation in the one go. The HTML abbr tag will allow us to define the full form of abbreviations or acronyms, and the browser will display the short-form version of letters normally on a web page, but upon hovering over those abbreviations, the browser will display the full form of that acronym automatically.

Syntax of HTML abbr Tag

The tag is generally used along with the

• Normal abbr Tag:

<abbr> PFA </abbr>

This will only display simple text without any meaning. Suppose we want to use assign full form for the above abbreviation, i.e. PFA, then

Attributes: As we have seen in the syntax, the title tag, when used along with the tag, becomes an attribute and assigns special functionality to it. Otherwise, there are no more specific tags available to use with the tag, but this tag supports the global attributes and event attributes that are available by default in HTML.

Examples to Implement HTML abbr Tag

Below are the examples of implementing the HTML abbr tag:

Example #1

In this example, we can see the Simple abbr without a Title Tag.

Code:

<abbr> PFA </abbr>

Output: will be a simple text as below,

Example #2

In this example, we can see the abbr With a Title Tag.

Code:

<abbr title="Please Find Attached"> PFA </abbr>

Output: will be an acronym with a dotted underline.

If we try to hover over this, it will display the title that we have given in a similar way to the tooltip.

Example #3

Here, we have used the CSS styling element font style as italic over the tag.

Code:

 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used 

Output:

Example #4

Let’s use some more CSS styling elements over tag.

Code:

 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used 

Output:

Here, we have made our acronym as bold and red using the CSS styling elements.

Example #5

Let’s modify the same example to add more styling and designing.

Code:

 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used 

Output:

In each of the examples above, try to hover above the acronym we have used, i.e. PFA, and see how the browser will display the title we have assigned to it.

Important Points to Remember

• The tag is supported by almost all browsers, including Google Chrome, Internet Explorer, Safari, Firefox, Opera, etc. The output produced by all the browsers may differ in some cases, but the result is the same.
• As there are no specific attributes available with the tag, we will see how can we stylize the attribute (using global attributes available) in the next examples. The default styling to display this element is display: inline, and it may vary from browser to browser.
• The tag can be used to provide the user with the full form or while definition in specific content or maybe in case of styling the document. It is not compulsory to always use the tag.
• The
• There used to be a tag before HTML 5 to define the abbreviations or acronyms, but it is deprecated from HTML 5 and should not be used.

Conclusion

So, we have seen the tag, which is introduced in HTML 5. This tag provided the way to define the abbreviations or acronyms and display their titles or detailed information in one go. We have seen multiple examples of attribute. There are no such special attributes available with this tag.

The above is the detailed content of HTML abbr Tag. For more information, please follow other related articles on the PHP Chinese website!