The <abbr> represents an abbreviation.So it's called as abbreviation tag also.It is a HTML5 tag.It is used with *title* attribute.Generally it use when we want to write abbreviated or short name of specific company/NGO/organization.just like WHO,It is abbreviated form of World Health Organization.When a user put cursor on that text programmed between abbreviation tag it show full name of that organisation.
Generally organizations or companies famous by the name of abbreviated name or like to use abbreviated name rather than long name just like **TCS** that is abbreviated name of 'Tata Consutancy Services'.
So that time we use tag to abbreviate long name.

e.g.:-

<p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p>

Result:- HTML is the best thing since sliced web.

when you put cursor on HTML It shows 'HyperText Markup Language'



How to use it:-


<abbr> tag is an inline element, so we can use it like this:

<p><abbr title="World Health Organization">WHO</abbr> is the best health organization.</p>

Result:- WHO is the best health organization.



Since <abbr> is an inline element itself, So it can be used inside other inline elements, like <strong> or <a>:

e.g.:-

<p>The <a href="http://www.org"><abbr title="World Wide Web ">WWW</abbr></a> requires<abbr>HTML</abbr>programmed page.</p>

Result:- The WWW requiresHTMLprogrammed page.


***abbreviation tag is not always a series of uppercase letters. You can also use <abbr> to mark up a lowercase letters. For example:

<h4><abbr title="HyperText Markup Language">HTML</abbr>is developed by <<abbr title="Incorporated">Inc.</abbr> compay</h4>

**title attribute require for showing full length of abbrevaited word.**

Use of css in <abbr> tag


<DOCTYPE html>
<html>
<body>
<style>
.abbr {border-bottom: 1px dotted black;}
</style>
<p>The <abbr class="abbr" title="World Health Organization">WHO</abbr> was Established in 1948.</p>
</body>
</html>

Result:- The WHO was established in 1948.


0 comments:

Post a Comment