HTML abbr

HTML Abbreviation <abbr> tag is used to define an abbreviation in text in an HTML document. Hovering on the Abbreviation element displays the value of title attribute provided for this Abbreviation element.

Example

A simple Abbreviation element is shown in the following example.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>Welcome to <abbr title="HyperText Markup Language">HTML</abbr> Tutorial!</p>
    </body>
</html>

Note: HTML Abbreviation element starts with the tag <abbr> and ends with an end tag </abbr>.

Default CSS for HTML <abbr>

By default, following CSS properties are set for an Abbreviation element.

</>
Copy
text-decoration: underline dotted;

Inline Style for HTML Abbreviation Element

We can change the style of an Abbreviation element through inline styling using style attribute.

In the following example, we have set the color as green for the Abbreviation element.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>Welcome to <abbr title="HyperText Markup Language" style="color:green">HTML</abbr> Tutorial!</p>
    </body>
</html>

Apply CSS for HTML Abbreviation Element

We can apply CSS for all Abbreviation elements using the abbr tag name.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            abbr {
              color:green;
            }
          </style>
    </head>
    <body>
        <p>Welcome to <abbr title="HyperText Markup Language">HTML</abbr> Tutorial!</p>
    </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML <abbr> tag and went through different examples that cover defining an HTML Abbreviation element, and styling it.