Menu
HTML

Text Abbreviation

In HTML, you can use the <abbr> tag to define abbreviations or acronyms. This tag provides a way to display the full description of an abbreviation when a user hovers over it, which can improve accessibility and understanding. The title attribute within the <abbr> tag specifies the full form of the abbreviation.

 

Here is an example demonstrating the use of the <abbr> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abbreviations in HTML</title>
    <style>
        /* Optional: custom styling for abbreviations */
        abbr {
            border-bottom: 1px dotted;
            cursor: help;
        }
    </style>
</head>
<body>
    <p>This is a paragraph mentioning an abbreviation: <abbr title="World Health Organization">WHO</abbr>.</p>
    <p>Another example: <abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>
    <p>Short forms like <abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="JavaScript">JS</abbr> are commonly used in web development.</p>
</body>
</html>

In this example:

  • The <abbr> tag is used to define abbreviations such as "WHO," "HTML," "CSS," and "JS."
  • The title attribute within the <abbr> tag provides the full form of the abbreviation.
  • A custom CSS style is applied to the <abbr> tag to add a dotted underline and a help cursor when the user hovers over the abbreviation, indicating that more information is available.

Using the <abbr> tag helps improve the accessibility of your content by providing additional context for abbreviations, which is especially useful for screen readers and other assistive technologies.

HTML