The <abbr> tag in HTML is used to define abbreviations or acronyms. It helps to provide additional information about the shortened form of a word or phrase.
Syntax
<abbr title="Full form or expanded text">Abbr</abbr>
title Attribute: This attribute is used to provide the full form or expanded text of the abbreviation. When a user hovers over the abbreviation, the full form appears as a tooltip.
Example
<abbr title="HyperText Markup Language">HTML</abbr>
When you use a shortened form of a word or phrase that might not be immediately clear to all readers. For example, "HTML" can be abbreviated from "HyperText Markup Language."
Abbreviation Vs Acronym
An abbreviation is a shortened version of a word or phrase, while an acronym is a word formed from the first letters of other words.
For example, "NASA" stands for "National Aeronautics and Space Administration."
Advantages of Using <abbr>
1. Improves Accessibility: Screen readers can read out the full form of the abbreviation, making your content more accessible to visually impaired users.
2. Enhanced User Experience: Provides additional context when users hover over the abbreviation, making it easier for everyone to understand the shortened form.
3. Better SEO: Search engines may understand the meaning of abbreviations better, which could help in indexing and ranking your content.
abbr-tag.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>abbr tag Example</title> </head> <body> <p>The <abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p> <p>The <abbr title="National Aeronautics and Space Administration.">NASA</abbr> is a U.S. government agency that is responsible for science and technology related to air and space.</p> </body> </html>
Above snippet generate below screen. Hover the mouse on given abbreviation to see the full text.
No comments:
Post a Comment