Unrestricted Access

Web Standards

Advanced Semantics


This article looks deeper into semantic HTML markup using a lot of uncommon elements. The article also discusses the differences between abbr and acronym and documents browser problems associated with them.

If you would like to know about the basics of semantics on the web, read The Semantic Web article.

Uncommon Elements


address should be used when making up an address, such as contact information. Setting the block to be preformatted will achieve the desired effect when stylesheets are enabled, but the address would lose meaning without it. To create line breaks within this element <br> should be used as the line breaks are part of the content and not purely visual.

## Road Name<br>
Town/City Name<br>

code should be used to mark up sections of computer code which is useful in tutorials. code is an inline element so it can be used in sentences. For example:

<p><code>table</code> is a HTML element.</p>

When displaying large blocks of data pre should also be used, as a container. pre also maintains white-space within the block, so indentations are kept. Below is an example block of some CSS which also demonstrates the use of pre and maintaining white-space:

body {
  width: 100px;
  background-color: #ccc;
Deleted and Inserted

del and ins should be used when information is deleted and inserted to a document after its initial publication date. Both elements can have a cite or datetime attribute to provide more information on the changes. By default deleted elements have a line-through styling and inserted elements are underlined.

I am going to buy a new <del>red</del> <ins>blue</ins> car.

Abbreviations and Acronyms


All acronyms and initialisms are abbreviations, however, all abbreviations are not acronyms or initialisms. Below are some definitions of abbreviations, acronyms and initialisms.


Is a word that has been abbreviated/shortened, or a string of words that have been reduced.

by the way
System Administrator
Document Type

Is a special type of abbreviation where the abbreviation is itself a new word that is able to be spoken. It can be generated by the shortening of words/phrases or by taking the initial letter of a phrase.

National Aeronautics and Space Administration
Pronounced: Nassa
Graphical User Interface
Pronounced: Gooey
North Atlantic Treaty Organization
Pronounced: Naytoe

Is when the abbreviation is generated out of the initial letters and each letter is read/spelt out.

HyperText Markup Language
Cascading Style Sheets
Portable Network Graphic

Unfortunately there isn't an <intitalism> element in HTML.

Because there is such confusion of when it is appropriate to use acronym, mark up all abbreviations as abbr and only change those that can be positively identified as acronyms after. This is because screen readers and other assistive technologies treat acronyms differently and attempt to speak them.


Both abbreviations and acronyms have a title attribute. This is displayed as a tooltip when a user hovers over the word.

<abbr title="HyperText Markup Language">HTML</abbr>

<acronym title="Graphical User Interface">GUI</acronym>
Browser Compatibility

Due to historical reasons Microsoft's Internet Explorer doesn't support abbr. By default browsers add a dotted bottom border to both abbreviations and acronyms and both can be styled using CSS. However, Internet Explorer ignores any CSS styling applied to abbr and does not show any default styling either. Because of this a lot of developers incorrectly use acronym to mark up all their abbreviations.

There are solutions for IE's lack of abbr support. Although IE doesn't support abbr it does support elements nested within them. A simple method is to nest a span within the abbr and style using selectors like the follow:

abbr span {
  cursor: help;
  border-bottom: 1px dotted #000

<abbr title="Graphical User Interface">
<span title="Graphical User Interface">GUI</span></abbr>

This method requires a lot of reduntant code to allow for the support. The title also should be repeated on both the abbr and span elements, though can only be applied to the span.

An automated method exists which uses Javascript to repeat the method above but as the page is loaded, client-side. This can be found in an external articled titled Styling <abbr> in IE.

Further Reading & Resources

Below are resources I used for this article and would be interesting further reading on the subject.

Forgotten Element Types

Graphic design is, of course, the sexy part of web design. A perhaps somewhat more boring aspect — although very important nevertheless — deals with structure and semantics.


Explaining Abbreviations, Acronyms and Symbols on Web pages

There is some markup in HTML that we can use for abbreviations and acronyms. However, such markup should not be regarded as a replacement for explicit explanations in normal document content. The real need is to explain to users all notations that might otherwise be unknown to them or have meanings that differ from their expectations.


HTML is not an Acronym...

As a result many developers (including myself, for a time) use acronym in place of abbr. Unfortunately, this is exactly the opposite thing that should be done: when in doubt, wrap the abbreviation/acronym/initialism with abbr. Even if it is an acronym, the mark-up will be semantically correct.


<abbr> vs <acronym> in the HTML 4 Specification

If you've read the HTML 4 specification recently trying to understand the difference between the abbr and acronym elements you may have come away feeling a little confused, I know I did. This article contains an explanation of the difference between the two tags, and when it is appropriate to use one or the other. The first element of business then is to explain what each of the words means, to do this I've enlisted the help of my trusty dictionary.


Why You Should Use Acronyms and Abbreviations

However, adding the <abbr> vs <acronym> tag with the appropriate title attribute can benefit you and people browsing your sites in a number of ways...