HTML abbr Tag

王林
王林Original
2024-09-04 16:26:501028browse

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> <pre class="brush:php;toolbar:false"><abbr> PFA </abbr></pre> <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> <pre class="brush:php;toolbar:false"><abbr title = "Please Find Attached" > PFA </abbr></pre> <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>Examples to Implement HTML abbr Tag</h3> <p>Below are the examples of implementing the HTML abbr tag:</p> <h4>Example #1</h4> <p>In this example, we can see the Simple abbr without a Title Tag.</p> <p><strong>Code:</strong></p> <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> <p><strong>Output:</strong> will be a simple text as below,</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543841332785.jpg" alt="HTML abbr Tag" ></p> <h4>Example #2</h4> <p>In this example, we can see the abbr With a Title Tag.</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> abbr tag in HTML <abbr title = "Please Find Attached" > PFA </abbr>

Output: will be an acronym with a dotted underline.

HTML abbr Tag

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:




 abbr tag in HTML 



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

Output:

HTML abbr Tag

Example #4

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

Code:




 abbr tag in HTML 



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

Output:

HTML abbr Tag

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:




 abbr tag in HTML 



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

Output:

HTML abbr Tag

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 attribute is used to provide full information or the full form of the specified acronym in the <abbr> tag. The <title> attribute is optional, and it will be used in the starting tag of the <abbr> tag.</li> <li>There used to be a <acronym> tag before HTML 5 to define the abbreviations or acronyms, but it is deprecated from HTML 5 and should not be used.</li> </ul> <h3>Conclusion</h3> <p>So, we have seen the <abbr> 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 <abbr> attribute. There are no such special attributes available with this tag.</p><p>The above is the detailed content of HTML abbr Tag. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">firefox</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">chrome</a> <a href="javascript:void(0);">safari</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="HTML tr Tag" href="https://m.php.cn/faq/1796600102.html">HTML tr Tag</a></span><span>Next article:<a class="dBlack" title="HTML tr Tag" href="https://m.php.cn/faq/1796600106.html">HTML tr Tag</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>