HTML abbr Tag
HTML <abbr> tag is used to define an abbreviation in webpage.
The HTML <abbr> tag is a simple tag which doesn't have any specific style attached to it, it is a utility tag which can be used to properly show abbreviations or short form of any text. It is used with the title attribute which provides a full-text explanation for the abbreviation or acronym text, which is added between the opening and closing <abbr> tag.
This abbr tag is used to provide useful information to translation systems, browsers and to search engines.
For example, Ms. is a short form for Miss and similarily we can use ST as a short form for Studytonight.
Here are some useful points related to the <abbr> tag:
-
The <abbr> tag is used only within the <body> tag.
-
The title attribute is optional for the <abbr> tag but if we include a title attribute then only we can provide the full form for the abbrevaition. In short, the <abbr> tag is meaningless without the title attribute.
-
Some browsers also apply special styling to the <abbr> tag like dotted underlines or also translate text into small letters.
-
This is an inline element.
HTML <abbr> tag - Syntax and Usage
The <abbr> tag requires both opening (start) tag and closing(end) tag.
Required syntax for the same is given below:
<abbr title="full form or explanation for short_form_text">
short_form_text
</abbr>
HTML5 <abbr> Tag Basic Example
Below we have a basic example to see how we can use the <abbr> tag. In the example below, we haven't specified the title attribute, so you will see that having the <abbr> tag will make no difference visually to our webpage. Although it will still inform the browsers and search engines that the text enclosed within the opening and closing <abbr> tag should be considered as an abbreviation, which is nothing but a short form for any text.
HTML <abbr> tag Attributes
This tag/element does not have any specific attributes although this element supports Global attributes and Event attributes.
The title attribute is the most important attribute which is used to define the full form of the abbreviation. Also the title attribute inside the <abbr> tag than it must provide a human-readable and complete description of the used abbreviation.
Note: Each <abbr> element you use in an HTML document is independent of all others, for example, suppose if you provide a title for one then it does not automatically attach the same expanded text to others having the <abbr> tag.
Default CSS Style for HTML <abbr> tag
Most Browsers display these default CSS Settings:
abbr {
display: inline;
}
Browser Support for HTML5 <abbr> tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 7+
-
Apple Safari 1+
-
Opera 6+
