HTML & CSS: The Good Parts

Separating Content, Structure, Presentation, and Behavior

Making Your Sites “Safe As Houses”

Imagine a dwelling. The simplest such structure meant to stand for any length of time will have some kind of durable structural frame anchored to the ground and covered with some kind of paneling.

For the client side of a website, that frame and cover are the structural layer, the markup: it defines the overall form of the result.

When you start getting fancy with your house, you can add things like siding, paint, trim, and shingles. This is like the presentation layer of your website, driven on the whole by CSS. In the same way that the walls and roof will fall off of a poorly framed house, CSS will be difficult to use if the markup is not properly assembled.

A good house has things like climate-control hardware, doors, windows, electricity, and plumbing. In many cases, things like this are what make the house truly enjoyable to live in. Likewise, the behavior layer of a website is the part that most clearly responds to user activity. However, without the other parts of the architecture and engineering properly installed, the behavior layer will most likely be ineffective.

And what about the content? Well, as the point of a house is to shelter people and their stuff, so the point of a website is to serve as the ideal vessel of a heap of content. Each HTML page holds a markup structure wrapped around content.

Separation in Practice

When a developer works under the principle of separation, the ...