What is an <abbr> Abbreviation Tag in HTML ?
Abbreviation Tag represents an abbreviation or acronym.
<abbr> element only supports the global attributes.
Abbreviation Tag starts with the opening <abbr> and closing tag</abbr>.
The “title” is an important attribute used with the <abbr> element.
“title” attribute should contain human-readable description or expansion of the abbreviation.
The “title” text is presented by browsers as tooltip whenever the mouse cursor is hovered over the element.
Why <abbr> Abbreviation Tag is used ?
Whenever there is a need to display the abbreviation acronyms for a word in the webpage, this <abbr> is used.
Note : All browsers displays the “title” text as inline (display: inline) by default.
How <abbr> tag displays the Abbreviated word ?
When the mouse over event happened over the text in the webpage, the fullname/description in <abbr title=””> is displayed.
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<abbr>HTML</abbr>
or
<abbr title="HyperText Markup Language">HTML</abbr>
Example :
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>US stands for <abbr title = "United States">United States</abbr></p>
<p>IN stands for <abbr title = "India">India</abbr></p>
<p>APJ stands for <abbr title = "Abdul Kalaam">APJ Abdul Kalaam</abbr></p>
<p>WHO stands for <abbr title = "World Health Organisation">World Health Organisation</abbr></p>
<p>EC stands for <abbr title = "European Community">European Community</abbr></p>
</body>
</html>
Output :
Global Attributes
<abbr> tag also support global attributes listed below,
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | id | unique_name | Declared unique id for an element. |
| 2 | class | class_name | Declared one or more classnames for an element. |
| 3 | style | styles | CSS inline styles specify an element. |
| 4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
<abbr> tag support following Event attributes listed below,
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | onfocus | script | element gets focus on object when script tobe run. |
| 2 | onblur | script | element lose the focus on object when scrip tobe run. |
| 3 | onclick | script | clicked on object when script tobe run. |
| 4 | ondblclick | script | double click on object when script tobe run. |
| 5 | onkeydown | script | key is pressed when script tobe run. |
| 6 | onkeypress | script | key is pressed over element then released when script tobe run. |
| 7 | onkeyup | script | key is released over element when script tobe run. |
| 8 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
| 9 | onmouseout | script | mouse pointer release over an element when script tobe run. |
| 10 | onmousemove | script | run mouse pointer moved when script tobe run. |
| 11 | onmouseover | script | run mouse pointer move over when script tobe run. |
| 12 | onmouseup | script | mouse button is released when script tobe run. |
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |
I quite like reading an article that can make men and women think. Also, thanks for allowing me to comment. Brittan Finley Teryn
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.