Structure

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 a document, plus the semantic and structured markup of a document’s 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 have an HTML document which contains the structure and content, and control the presentation of the document entirely with CSS.

Separation of structure from presentation is not very common on the Web today. On most websites the HTML code lacks both structure and semantics.

Tables for layout

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.

Read more:

• Why tables for layout is stupid

  The slides used at a presentation that was held at Seybold 2003.

Semantic HTML

Another important part of separating structure from presentation is using semantic markup to structure the document’s content. When an XHTML 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, or a text-based browser in a Unix shell.

Headings

To mark up headings, use <h1>, <h2>, <h3>, <h4>, <h5> or <h6> depending on the heading level. <h1> is the highest level.

Examples:

<h1>Document heading</h1>
<h2>Sub heading</h2>

Document heading

Sub heading

Paragraphs

Use the <p> element to mark up paragraphs. Do not use the <br /> element to create space between paragraphs. Margins between paragraphs are handled by CSS, and requires paragraphs to be marked up correctly.

Example:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec risus. Ed rhoncus sodales metus. Donec 
adipiscing mollis neque. Aliquam in nulla.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.