Web Site Primer

HTML · Web Design · Color Charts · & More!

HTML Markup: Abbreviation Tags

Originally Published: 2001-09-22
Updated: 2006

There are times when you may need to share abbreviations and acronyms within a Web document. HTML provides us with two content-based tags for those occassions: Abbreviation and Acronym. This article will share about the markup used for abbreviations.

In version 4.0, of HTML, there were new sets of markup introduced that are considered content-based, or falling under logical placement thoughts, in terms of having a reason behind their usage that goes beyond visual appearances. Yet at that time, none of the browsers supported these markup elements so it was a guessing game on the browsers would render these. The more current browsers, however, will incorporate therefore render the newer markups.

However some HTML elements may not always physically alter text. Remember that HTML is used for structuring contents within a Web document and that does not necessarily pertain solely to visual aesthetics, or design, of that same Web document.

As of 2006, many of the newer browsers (for example, Firefox), or newer versions of existing browsers (for example, Opera), support these new sets of HTML elements.

Abbreviation Markup

<abbr>TEXT</abbr>
Paired tag; no shortcut.
Inline Element
abbr is short for Abbreviation/
Use: Content-Based. Surrounds text that is an abbreviation.
Suggestions: Unclear on if this should be used at each instance or just the first instance, as with Definition tags.

Example of abbreviation markup:
<abbr title="Abbreviation">ABBR</abbr> is part of the content-based tags.

Appearance on the Web
(will appear as dark green text within your browser of choice):

ABBR is part of the content-based tags.

"Acronym is essentially an Abbreviation, so why two different tags?"

Acronyms often are formed from the first letter of each word of the term or phrase. For example: HUD is an acronym for the U. S. government agency Housing & Urban Development.

Whereas abbreviations are generally shortened, or abbreviated, form of a word or phrase. For example: etc. is an abbreviation for the Latin phrase et cetera.

So there is a marked difference between the two which leads us to the possible reasons behind the creation of these two HTML tags. One reason is shared by all content-based tags: for use with automated searching and content compilation.

The second reason, however, may have some basis in Web Accessibility thoughts. Some people recommend, with the first appearance of the abbreviation or acronym, using the title attribute to share what the abbreviation or acronym stands for.

For example: In Opera, when the abbreviation sharing a title attribute, is moused over - the title attribute text will appear in the status bar. This instance will share an unusual dotted underlining to that portion of text to attract the user's attention (See Image). Otherwise the enclosed text's physical appearance blends in with the other text on the page (or normal). In version 5.5 of Internet Explorer the title attribute, used in abbreviation or acronym elements, is not supported and the enclosed text does not stand out from surrounding text.

(I am not certain about text-to-speech browsers' handling of these two elements.)


Related Articles:


straight to the top