Roger Johansson, 456 Berea Street
Warning! Old content ahead. The latest update was 2008-11-01.
When discussing web standards, something that is mentioned a lot is the importance of separating structure from presentation. Understanding the difference between structure and presentation can be difficult at first, especially if you’re used to not thinking about the semantic structure of a document. However, it’s very important to understand this, since controlling the presentation of a document with CSS becomes much easier if structure and presentation are separated.
Structure consists of the mandatory parts of an HTML document plus the semantic and structured markup of its contents.
Presentation is the style you give the content. In most cases presentation is about the way a document looks, but it can also affect how a document sounds – not everybody uses a graphical web browser.
Separate structure from presentation as much as possible. Ideally you should end up with an HTML document which contains the structure and content, and a separate CSS file which contains everything that controls presentation.
In order to separate structure from presentation you need to use CSS instead of tables to control the presentation of a document. When you’re used to using tables for layout, this can feel uncomfortable and strange, but it isn’t as difficult as it may seem at first. There’s plenty of help available on the Web, and the advantages are so many that it definitely is worth taking the time to learn the different way of thinking that is required.
Another important part of separating structure from presentation is using semantic markup to structure the document’s content. When an HTML element exists that has a structural meaning suitable for the part of the content that is being marked up, there is no reason to use anything else. In other words, do not use CSS to make an HTML element look like another HTML element, for instance by using a span element instead of an h1 element to mark up a heading.
By using semantic HTML, you will make the different parts of a document meaningful to any web browser, be it the very latest graphical web browsers on a modern PC, an old web browser that doesn’t handle CSS, a text-based browser in a Unix shell, or assistive technology used by people with disabilities.
To mark up headings, use h1 - h6 elements. h1 is the highest level and h6 the lowest.
<h1>Document heading</h1> <h2>Sub heading</h2>
Use the p element to mark up paragraphs. Do not use br elements to create space between paragraphs. Margins between paragraphs are better handled by CSS.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.</p>
A list of things should be marked up as a list. There are three different kinds of lists in HTML: unordered lists, ordered lists, and definition lists.
Unordered lists, also known as bulleted lists, start with <ul> and end with </ul>. Each list item is contained in an li element.
Ordered lists start with <ol> and end with </ol>.
Definition lists are a little different. They are used to mark up a list of terms and descriptions. Definition lists start with <dl> and end with </dl>. The terms that are being described are contained in dt elements, and descriptions are contained in dd elements. Each group of terms and definitions can consist of one or more dt elements followed by one or more dd elements.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<dl>
<dt>website</dt>
<dd>A collection of linked web pages that represent a company
or an individual.</dd>
<dt>web page</dt>
<dd>The basic unit of information on the Web, containing text,
graphics and other media.</dd>
</dl>
CSS makes it possible to use lists even when you don’t want their content to be presented as a traditional list. A navigation bar, which is a list of links, is a good example of this. The advantage of using a list for a menu is that the menu will make sense even in browsers that don’t support CSS.
The q element should be used for shorter, inline quotations. Web browsers are supposed to automatically render quotation marks before and after the content of the q element. Unfortunately, Internet Explorer doesn’t, and in some cases the q element can even cause accessibility problems. Because of this, some recommend that you avoid using q, and insert the quotation marks manually. Containing inline quotes in span-elements with a suitable class allows the use of CSS for styling quotes, but has no semantic value. Read Mark Pilgrim’s The Q tag for a detailed look at the problems with the q element.
For longer quotations that form one or more paragraphs, the blockquote element should be used. CSS can then be used to style the quotation. Note that text is not allowed directly inside a blockquote element – it must be contained in a block level element, usually a p element.
The cite attribute can be used with both q and blockquote elements to supply a URL for the source of the quotation. Note that if you use span elements instead of q elements for inline quotations, you cannot use the cite attribute.
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/ struct/text.html#h-9.2.1">The presentation of phrase elements depends on the user agent.</q>.</p>
The W3C says that The presentation of phrase elements depends on the user agent.
.
<p>The W3C says that <span class="quote">“The presentation of phrase elements depends on the user agent.”</span>.</p>
The W3C says that “The presentation of phrase elements depends on the user agent.”.
<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html">
<p>The following sections discuss issues surrounding
the structuring of text. Elements that present text (alignment
elements, font elements, style sheets, etc.) are discussed
elsewhere in the specification. For information about characters,
please consult the section on the document character set.</p>
</blockquote>
The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.
The em element is used for emphasis and the strong element for strong emphasis. Most web browsers display emphasized text in italics, and strongly emphasized text in bold. However, this is not a requirement. Avoid using emphasis when all you really want is the visual effect of bold or italic text.
<p><em>Emphasized</em> text is normally displayed in italics, while <strong>strongly emphasized</strong> text is usually displayed in bold.</p>
Emphasized text is normally displayed in italics, while strongly emphasized text is usually displayed in bold.
HTML tables should not be used for layout. For marking up tabular data, however, tables are what should be used. To make data tables as accessible as possible it is important to know about and use the various components that can make up a table. A few examples are table headings (the th element), summaries (the summary attribute), and captions (the caption element).
<table class="example" summary="The Swedish population increased
by approximately 115 000 between 1999 and 2003.">
<caption>Annual population increase in Sweden, 1999–2003</caption>
<thead>
<tr>
<td> </td>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Population</th>
<td>8 861 426</td>
<td>8 882 792</td>
<td>8 909 128</td>
<td>8 940 788</td>
<td>8 975 670</td>
</tr>
<tr>
<th scope="row">Increase</th>
<td>7 104</td>
<td>21 366</td>
<td>26 368</td>
<td>31 884</td>
<td>34 882</td>
</tr>
</tbody>
</table>
| 1999 | 2000 | 2001 | 2002 | 2003 | |
|---|---|---|---|---|---|
| Population | 8 861 426 | 8 882 792 | 8 909 128 | 8 940 788 | 8 975 670 |
| Increase | 7 104 | 21 366 | 26 368 | 31 884 | 34 882 |
For a more detailed description of tables and their use, see Bring on the tables, Tables in HTML documents and HTML Techniques for Web Content Accessibility Guidelines 1.0.
The slides used at a presentation that was held at Seybold 2003.
An excellent resource for learning the reasoning used to figure out how to mark up something in a semantic way.
Comments, questions or suggestions? Please let me know.
© Copyright Roger Johansson