Separation: The Web Designer's Dilemma

Choosing your own preference

by Michael Cohen

With all the discussion about separating presentation from content (and structure), it's easy to lose track of the goal. So let's step back, define our terms, and take a look at why it matters.

Presentation

The major reason to separate presentation from the rest of the page is simple: to simplify any change from a slight design adjustment to a full-fledged redesign. To achieve complete separation of the presentation, we must isolate everything specifically and solely geared towards style.

Contrary to what you might be thinking, this isn't limited to just the CSS, not even on a site like CSS Zen Garden. It also involves HTML tags and properties that exist only to provide a handle for the designer to apply styles to. After all, what use is a .pageheader {.} declaration block if there is no element with that class on the page?

Hold on to this thought and read on.

Content

The reason to separate content from the rest of the page is just as easy to see as the reason to isolate presentation. Isolation of content makes adding or updating things easy while maintaining presentational consistency throughout the site. However, as with the presentation, there can be confusion over what content actually is.

For our purposes, content is (usually) text and includes accompanying semantic coding: tags like h1-h6, paragraphs, list, em, strong, code, cite, etc. Content should not require any additional presentational tags or styles in order to fully convey its message.

In isolated cases, we might use additional tags to more correctly present the content. For example, a poem - where specific line breaks are important - could be set apart by a <pre class="poem"> tag, or it could simply make use of
tags to break lines.

Structure

Here's where things get sticky. First of all, what is structure? We could describe structure as everything that makes up a page, minus presentational elements and content. However, this is at best an overly simplified definition that could easily cause undue confusion.

Take the navigation menus on ALA as an example:

1. Change a color here, a border thickness there, and you have a change in presentation.
2. Change the text of the first navigation item from "Up front" to "Home", and you have a change in content.
3. Lastly, you have the <div id="menu">, <ul>, and <li id="."> tags as the structure. Switch those out with an antique row of table cells, and you have a change in structure.

Switch those out with an antique row of table cells, and you have a change in structure.

But wait - remember what I pointed out earlier? Those tags include presentational elements: the IDs. As both Doug Bowman and Eric Meyer have pointed out, presentation is pointless without structure. Furthermore, I'll show that it's also pointless to try to separate structure from content.

Take the simplest example of web content you can think of:

<h1>Title</h1> <p>Lorem ipsum dolor met.</p>

The <h1> and <p> tags are clearly part of the content, right? We can't write correct HTML content without this basic semantic markup. Yet this markup is also part of the document structure, dividing up an otherwise-uniform blob of words into a heading and a paragraph. (And of course, if you want to get picky, you can consider the markup to also be a part of the presentation as well. After all, the browser has a preset way of displaying <h1> and <p> text, doesn't it?)

So where does this leave us?

Back to top