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 attribute. As the title tag is used to define the title of the document, the title, when used with the <abbr> tag, becomes an attribute and has a special meaning to it. The title will contain the human-readable title or the full form of an acronym. The <abbr> tag displays the full form on hovering to the user and makes it simplified to define the description. This information is much more useful to browsers, search engines and assistive systems like the translation system. Below is the syntax of the abbr tag,</p>
<ul>
<li><strong>Normal abbr Tag:</strong></li>
</ul>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr> PFA </abbr></pre><div class="contentsignin">Copy after login</div></div>
<p>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 <title> attribute is used,</p>
<ul>
<li><strong>abbr Tag with Title Tag:</strong></li>
</ul>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr title = "Please Find Attached" > PFA </abbr></pre><div class="contentsignin">Copy after login</div></div>
<p>Here, we have defined the display title as short-form, but at the same time, we have defined the full form of it using the <abbr> tag along with the <title> tag. The <abbr> tag comes as pair, so there will always be a closing </abbr> tag available.</p>
<p><strong>Attributes: </strong>As we have seen in the syntax, the title tag, when used along with the <abbr> tag, becomes an attribute and assigns special functionality to it. Otherwise, there are no more specific tags available to use with the <abbr> tag, but this tag <abbr> supports the global attributes and event attributes that are available by default in HTML.</p>
<h3 id="Examples-to-Implement-HTML-abbr-Tag">Examples to Implement HTML abbr Tag</h3>
<p>Below are the examples of implementing the HTML abbr tag:</p>
<h4 id="Example">Example #1</h4>
<p>In this example, we can see the Simple abbr without a Title Tag.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title> abbr tag in HTML </title>
<style>
body {
text-align: left ;
}
</style>
</head>
<body>
<abbr > PFA </abbr>
</body>
</html></pre><div class="contentsignin">Copy after login</div></div>
<p><strong>Output:</strong> will be a simple text as below,</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543841332785.jpg" class="lazy" alt="HTML abbr Tag" ></p>
<h4 id="Example">Example #2</h4>
<p>In this example, we can see the abbr With a Title Tag.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title> abbr tag in HTML
<abbr title = "Please Find Attached" > PFA </abbr>
