Add Abbreviation Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the abbreviation tag in HTML.
What is Abbreviation Tag in HTML
HTML abbreviations are shorthand versions of commonly used words, phrases, or code snippets in HTML. They are used to simplify the code and make it more readable. Abbreviations are defined using the <abbr> element in HTML. The <abbr> element specifies the full term and the abbreviation itself.
The syntax for the abbreviation tag is straightforward. It requires an opening and closing abbreviation tag, the shorthand text is placed between these two tags, and the title attribute specifies the full term of the shorthand text.
Here's an example of how to use <abbr> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Abbreviation Tag Example</title>
</head>
<body>
<abbr title="HyperText Markup Language">HTML</abbr>
</body>
</html>In the above example, the full term is HyperText Markup Language and the abbreviation is HTML. When you move the mouse cursor over the abbreviation, the full term is displayed in a tooltip. The abbreviation is displayed with a dotted underline on the browser screen.
Attributes of Abbreviation Tag
Here are the attributes we can use with the abbreviation tag:
- id
- class
- style
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the abbreviation tag and use it to apply a specific style to that particular tag.
Example
<abbr title="HyperText Markup Language" id="short">HTML</abbr>In the above example, we assign an id attribute to the abbreviation tag with a value short. In CSS and JavaScript, we can use the name short to access the specific abbr tag whose id value is set to the name short.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the abbreviation tags and use it to apply a specific style to all the abbreviation tags that belong to a particular class.
Example
<abbr title="HyperText Markup Language" id="info">HTML</abbr>
<abbr title="World Wide Web" id="info">WWW</abbr>In the above example, both abbr tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both abbr tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the abbreviation tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<abbr title="HyperText Markup Language" style="color: red">HTML</abbr>The style="color: red" will change the font color of the abbreviation tag to red.
