Advanced Semantics

Introduction

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

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.

<address>
## Road Name<br>
Town/City Name<br>
State/County<br>
Zip/Postcode
</address>

Code

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:

<pre><code>
body {
  width: 100px;
  background-color: #ccc;
}
</code></pre>

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

Definitions

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

Abbreviation

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

Examples:

btw: by the way
sysadmin: System Administrator
doctype: Document Type

Acronym

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.

Examples:

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

Initialism

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

Examples:

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
PNG: 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.

Markup

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.

Unrestricted Access

Web Standards