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 <br> 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:

Change a color here, a border thickness there, and you have a change in presentation.
Change the text of the first navigation item from “Up front” to “Home”, and you have a change in content.
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.
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?

Content and structure
You can theoretically separate content and structure, but then you’d be left with <ul><li></li></ul> for structure and plain featureless text for content. Needless to say, building a functional site out of those is quite impossible.

So we can conclude that structure cannot and should not be separate from content.

Presentation and structure
As we have seen, without structural elements, there is no way to apply styling to the content. Structure cannot be separate from presentation — nor should it be.

Which leaves us with …

Presentation and content
Although presentation still depends on structure, some of which is embedded into the content as noted above, presentation can and should be separated from content.

And while major presentational changes can require changes in structure, content can be changed without any need for structural change beyond the already-embedded structural elements.

American-Israeli webmaster Michael Cohen has been coding web pages since 1995. He is currently vice president of the Internet design and hosting company Revolution Media LTD.. During his free time, he enjoys haunting (and administrating) the still-very-much-active Freespace-oriented Hard Light Productions.