Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

HTML Abbreviation Element

The HTML <abbr> tag is used to define an abbreviation within a document. It is typically used to provide an expanded version or explanation of an abbreviation, allowing users to understand the meaning of the abbreviated term. The tag is a semantic one, which means it carries meaning and helps describe the structure of the content.

Here's an example:

The letter was sent in c/o her agent.

In the above example, the abbreviation "c/o" is wrapped in the <abbr> ... </abbr> tag set. The title attribute is displayed as a tooltip in most browsers. If you rest your cursor on the abbreviation you'll see the tooltip. The abbreviation is visually identified by a dotted underline in most browsers, but you can use CSS styling to change that. The tooltip is very plain looking, but this can be spruced up as well. More on that later.

Here's how that "c/o" abbreviation was written in the code:

The abbreviation tag helps improve accessibility by providing additional information about abbreviations for users who may not be familiar with them. It is also useful for search engine optimization (SEO), as search engines can understand the meaning of the abbreviation and provide more accurate search results.

Overall, the abbreviation tag is commonly used when it's necessary to clarify or it's desired to provide more information about the abbreviation without spelling it out on the page itself.

A Better Looking Abbreviation Tooltip

Rest your cursor on this abbr. to see a nicer looking tooltip.

It's not a super-fancy tooltip, but it is nicer looking and easier to read, in my opinion. I used an online tooltip generator to generate the code. It seems to work well and pops up faster. You'll find it here. You can also edit the CSS styles the tooltip generator creates to further cusomize the look of the tooltip.

The tooltip has a max-width, so you're limited as to how much text you can enter. Edit the max-width part of the CSS to fit in more text. It doesn't wrap as coded, so it just makes the tooltip longer. I got around that by changing this...

...to this

Note that I added text-align: left; under the white-space: wrap;, otherwise the text will all be centered, which doesn't look as nice, in my opinion.

I recommending put the CSS portion in a separate file and save it as popup.css or another relevant name, then link to it in the HEAD section of the pages where you want to use it. Then you can place the HTML portion in your page, style the acronym however you like, and have a nice popup.

One of the nice things about it, is that it doesn't use the abbreviation tag, it uses a span tag. That means you can use it in place of acronyms, abbreviations, on links, or in many other ways. Of course, you can always just use the acronym tag, too. It's easier.

This is the full version of this tutorial. I didn't short-change you with an abbreviated version. Sorry.