There is a somewhat recent movement in the web development world that is surrounded by quite a furor—the web standards movement. With the advent of browsers that do a half-way decent job of supporting CSS, many web developers claim that it is possible to build web sites that effectively separate presentation from content. This would allow you to write the HTML for your site once and update the appearance as much as you like without changing the code for the site.

Unfortunately, the separation of content and presentation is a myth.

For now.

The problem is that the capabilities of CSS are limited enough at the present moment that it is often hard to have enough “hooks” or HTML elements to apply CSS styles to, presenting web designers with a dilemma—either limit the range of achievable presentations or clutter page code with some non-semantic, presentational/layout HTML tags.

Web Design Heresy

There are many supporters of the web standards movement that would beg to differ and would call me a heretic. However, I am one of the strongest supporters of the web standards movement. I strive to separate my content and my presentation. I read about every method of overcoming browser deficiencies and inconsistencies that I can find. I wish that browser support for standards was better and that all designers would (eventually) throw away the use of tables for layout purposes. I would agree that separation of content and presentation has come a long, long way. I simply chose to present a controversial point of view in order to prove a point—there are times when it is impossible, or unreasonably difficult, to achieve certain presentations without more CSS “hooks.”

Extend the Power of CSS

Our pie-in-the-sky dream is that one day, hopefully sooner rather than later, CSS will have new abilities and powers added to it and supported in browsers that will make the separation of content and presentation and the creation of killer designs easier. Rounded corners. Equal-length columns. Minimum widths. No more hacks.

That day, however, may be a ways in the future. So what do we do in the meantime?

Those who fight the web standards movement usually claim that web standards supporters are over-idealistic and don’t focus on the practical issues of every-day web design and site building. I would strongly disagree. I code within the limitations of day-to-day, deadline driven, limitation riddled web design every day. I know many others who do as well. We have found ways, in a manner similar to those who started using tables for layouts, to cope with web design problems.

The Separation of Content, Presentation, and Layout

Because certain presentations, especially when it comes to layouts, are currently impossible or unreasonably difficult to implement using semantic HTML and CSS alone, many web developers have begun to separate their layout elements from their content and presentation. This allows them to achieve design goals and still make easy changes later. There are many ways to do this, including the following:

• Class-name-based Search and Replace

  By naming each layout-specific element carefully, developers can do global search and replaces to make changes to layouts. Obviously, this is a very cumbersome and error-prone solution, but it allows developers to achieve the necessary presentation and move on with some kind of prayer that they will be able to modify all their layout elements should change be necessary later. Also obviously, use this solution as a last resort.

• JavaScript Insertion

  Clever JavaScript coders have written scripts that will identify certain elements and then wrap them in non-semantic layout code. Some argue that this isn’t true separation of content and presentation, but it counts—the presentation is only meshed to the content at the browser level (not in the content source file), and the JavaScript can be turned off, leaving perfectly semantic code. This is a pretty good stop-gap measure to put in place while we wait for CSS and browsers to improve.

• Inclusion of Layout Elements

  This is the server-side version of JavaScript Insertion—files are “included” at key points in the content source. These files contain the layout and presentational, not always semantic, HTML and CSS. They can be changed later to reflect improvements in CSS and browsers.

• CMS-based Templates

  Templates are easily the most poweful method of separating layout from content. Because the system takes care of the leg-work of changing the pages based on a certain layout, these pages will be super-easy to modify and to update with more compliant HTML and CSS later.

These methods all rely on HTML and CSS for layout purposes. We don’t need a new technology to make this possible—I would simply say that there is a third class of information that needs to be considered. We have Content, which is what the elements say. We have Presentation, which is what the elements look like. And now we need to have a more robust system for Layout, which is where the elements are.

The Persistence of Separation of Content, Presentation, and Layout

There will always be some kinds of wrapper elements in HTML—these wrappers give semantic meaning to the HTML. They define what elements belong together. These wrappers can be used for layout purposes as well. But if the relationship of wrappers to elements ever changes, then it is very beneficial to have a method for easily updating the layouts of web pages. That’s one reason CMSs have become so popular. A web standards-compliant CMS or template system is basically a must for anyone building a site with more than 3-5 pages per layout or more than 10-15 pages total.

Because the locations of elements will change (independently of their content or appearance), HTML and CSS for layouts need to be managed separately, just like content and presentation are separated. Separation of content, presentation, and layout will further improve the power and robustness of web design, making site creation and maintenance easier and freeing up precious time for other important things.