HTML Abbreviation Tag

Introduction

HTML <abbr> tag is used to define an abbreviation or an acronym.

In this lab, you will learn how to use the HTML <abbr> tag to indicate which abbreviations and acronyms appear in the text of your web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Add the Heading

First of all, create an HTML document named index.html and declare the docType.

Add the heading to the index.html file.

    <h1>Creating Abbreviations in HTML</h1>

Add Content

Add some text content to the HTML file.

    <p>Suppose we have an abbreviation like Mr. or Mrs. which are very common in our day to day life or we can have technical abbreviations like HTML, CSS or HTTP.</p>

Use the <abbr> tag

Use the <abbr> tag to define the abbreviation and include the title attribute to provide a full explanation of the abbreviation.

    <p>Suppose we have an abbreviation like <abbr title="Mister">Mr.</abbr> or <abbr title="Misses">Mrs.</abbr> which are very common in our day to day life or we can have technical abbreviations like <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> or <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>

Add Styles to the <abbr> tag

Add styles to the <abbr> tag to change how the abbreviation displays on the webpage. For example, we can add a dotted underline to indicate an abbreviation.

    <style>
        abbr {
            text-decoration: underline dotted;
        }
    </style>

Save your file and open it in a web browser to see the result.

Summary

In this lab, you have learned how to create abbreviations and acronyms in web pages using the HTML <abbr> tag. You have also learned how to add styles to individual <abbr> tags and apply styles to multiple tags using the global class attribute.