How to mark abbreviations and make them understandable in HTML ?

Last Updated : 10 Oct, 2021

In this article, we will learn how to specify a shorter version of the content in HTML. The <abbr> tag (Abbreviation) is used to define the abbreviation or short form of an element. The <abbr> and <acronym> tags are used as shortened versions and used to represent a series of letters. For instance, “HTML” is used as an abbreviation for “HyperText Markup Language”.

Syntax:

<abbr title ="text">Abbreviated form</abbr>

Attribute: This tag accepts an optional attribute as described below:

title: It is used to specify extra information about the element. When the mouse moves over the element then it shows the information.

Example: This example illustrates the use of the <abbr> tag in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>abbr tag</title> 
</head> 
  
<body> 
    <h2>Welcome to <abbr 
        title="GeekforGeeks">GFG</abbr> 
    </h2> 
</body> 
  
</html> 

Output:

Using <abbr> tag simply won’t show the expansion of the abbreviation even if the mouse has hovered over it. This makes it difficult for the user to understand the abbreviated form.

There are two ways using which we can make abbreviation understandable:

using <abbr> with title attribute
using <abbr> with<dfn>

We will understand both ways through the examples.

<abbr> with title attribute:

In order to remove this problem, the <abbr> tag is used in combination with the title attribute which provides an expansion for the abbreviation. This text is provided by the browser as a tooltip when the mouse pointer has hovered over the element.

Syntax:

<abbr title="expanded form"> abbreviated form </abbr>

Example: In this example, we have used the title attribute inside the <abbr> tag that specify extra information about the element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>abbr tag</title> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
  
    <p> 
        <abbr title="GeekforGeeks">GFG</abbr>: 
        A Computer Science portal for geeks. 
    </p> 
</body> 
  
</html> 

Output:

<abbr> with<dfn>: < abbr>can be used with <dfn> to add definition for an abbreviation.

Syntax:

<dfn> <abbr title="Expanded form"> Abbreviated form </abbr> </dfn>

Example: This example illustrates the use <abbr> tag with <dfn> tag in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>abbr with dfn</title> 
</head> 
  
<body> 
    <h2> 
        <dfn> <abbr title="Geeks For Geeks"> 
            GFG</abbr> 
        </dfn> 
        : Learn Data Structures Online At  
        Your Own Pace With The Best Of Faculty 
        In The Industry. 
    </h2> 
</body> 
  
</html> 