You are here:

1. Manual
2. Development
3. Descriptive markup
4. Writing
5. Formatted text

Indicating emphasis

Words that require emphasis are often set in italics or bold type. There are two obvious elements in HTML for this visual effect: the i (italics) element and the b (bold) element. However, these elements do not correspond to marking importance in the text. A selection marked in italics as, <i>important!</i>, does not say much except that the text is in italics, and does not imply that the text is emphasised.

“Although they (HTML elements for font styles, such as i and b, sic.) are not all deprecated, their use is discouraged in favour of style sheets.”

W3C HTML 4.01 specification, Elements for font styles

Two meaningful elements provide a better alternative: the em (emphasis) element and the strong element. Use these elements if a text requires emphasis, <em>important!</em> or strong emphasis, <strong>very important!</strong>. Besides the fact that a graphic browser will automatically display this text in italics and bold, a speech browser can read this text with emphasis.

Use of the i and b element is not forbidden. They can come in handy when applying certain style conventions, like marking names of ships, animal and plant species and words in foreign languages.

Referring to a source is effected differently, using the cite element. See References and quotations.

Abbreviations

Abbreviations can be marked by means of the abbr (abbreviation) element. Usually, an abbreviation is only marked in full the first time it occurs in a text:

<abbr title="Christian Democratic Appeal">CDA</abbr>

Subsequently, a simple <abbr>CDA</abbr> will suffice each time that abbreviation appears on the same page. Do not use this markup for any old abbreviation. Programmes that read the web page tend to be familiar with common abbreviations. Use abbr markup only if the meaning of an abbreviation might be unclear, if the abbreviation plays a key role in the text or if the abbreviation is not listed in the dictionary.

abbr Markup pitfalls

The use of this element has several pitfalls. It is important to realise that this markup is not a replacement for writing out an important abbreviation ‘as usual’.

This marking will be useless to most visitors: the abbr element is not supported by Microsoft Internet Explorer, the browser which most visitors use.

Browsers that do support the element will underline an abbreviation. The visitor has to move the mouse pointer over the text to find out the meaning of the abbreviation displayed in a tooltip (a small window with additional information). This is a lot of work, a virtually unknown function and moreover the underlining causes confusion with links.

So, what is abbr markup good for?

For search spiders and modified browsers that can generate summaries of abbreviations by themselves. In an situation that is optimal for as many people as possible, a text would look as follows:

Member of the Board R. Timmer, chairman of the <abbr title="Christian Democratic Appeal">CDA</abbr>
(Christian Democratic Appeal), presented the plans for the next two years to the party. The <abbr>CDA</abbr>
has decided to set an uncompromising course.

“Marking up these constructs (abbreviations, sic.) provides useful information to user agents and tools such as spell checkers, speech synthesizers, translation systems and search-engine indexers.”

W3C HTML 4.01 Specification, Phrase elements

The acronym element

There is an alternative to the abbr element that is visually supported by Microsoft Internet Explorer: the acronym element. However, an acronym is a special type of abbreviation and has the same pitfalls as abbr. Furthermore, the acronym has been removed from future versions of XHTML. If abbreviations are to be marked, it is best to use the abbr element.

Definitions

Terms that are suitable for inclusion in a definition list or glossary elsewhere on the page or website can be laid out using the dfn (definition) element. Marked definition terms can then be made visible by means of CSS (Cascading Style Sheets).

You should complete a <dfn>37E form</dfn> and return it before the end of the year.

Markup for a definition list can be found at Definition lists.

Modifications

If the information on a page is updated regularly and it is important that the modifications are visible as such, use the ins (insert) element for additions and the del (deletion) element for deletions. If applicable, the datetime attribute can be applied to this markup to give, for instance, search spiders an indication of the modification date. Of course it remains essential for such a modification date to be visible to visitors; therefore it should at least be written out in full.

<del>Bouwgroep Zaanstra</del>
<ins datetime="2004-05-18T12:26:00+01:00">Siemens Bouw</ins>
has been brought in for the realisation of this project. (Last modified on 18 May 2004)

Superscript and subscript

Superscript and subscript are font styles where the text appears above or below the line, respectively. Use of markup like the sup (superscript) and sub (subscript) element should be avoided if possible. Superscript and subscript often occur in mathematical and chemical notation, but also in references to footnotes, the notation of square or cubic metres and abbreviations of ordinal numbers. In the case of a reference to a footnote, use the following (descriptive) markup.

According to the Willemse report<a href="#note1" class="footnote">1</a>,
the state of the Frisian economy is gloomy.

CSS can then be used to change the appearance of this notation so it is displayed as a superscript 1.

(Keyboard) characters are available for a superscript 2 and 3 – for instance, in notation for square or cubic metres. Use these characters instead of HTML markup.

In the case of abbreviations of ordinal numbers, for instance, ‘first’ and ‘second’, write them out in full as much as possible. If the abbreviated version does have to be used – unavoidable for large numbers – use sup markup:

This event was held for the 27<sup>th</sup> time.