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

<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> can be used as the line breaks are part of the content and not purely visual.

<address>
## Road Name
Town/City Name
State/County
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.

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>
body {
  width: 100px;
  background-color: #ccc;
}
</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 attributes to provide more information on the changes. By default deleted elements have a line-through styling and inserted elements are underlined.

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

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 to mark up all their abbreviations.

There are solutions for IEs lack of 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 following:

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.