Angela P Ricci

This article was written a couple of years ago after realizing that lots of people, specially web developers, were attributing too much power to the CSS design, almost forgetting that there was the HTML markup behind.

This is a very old post; I've decided to republish it because I can make exactly the same remark today. Anything changed. Worst: as the CSS3 properties are arriving at the same pace that HTML5 is getting defined, the confusion has grown bigger and the distinction between markup and style are getting thinner than ever for some.

If you take the style off, what's left?

When the most popular browsers began to support the version 2 of the CSS specs, — of course, a support with an acceptable level of compatibility between browsers — the web world faced then one of its biggest revolutions. We've found that the style-sheets were super cool: it defined and controls the page layout, it positioned the page content, and it defined colors, fonts and image backgrounds! Genius! All of a sudden, the style-sheet was doing everything and we, well, we were so “blinded” by its powers that we've just forgot the most important thing in a web page, the markup. Yes, because if you take the styles out, what's left is the markup. And it is precisely the markup, the “matrix” of our pages, the one and only responsible for the success of our web products. “Ouah... that's a bit of an exaggeration, isn't it?”, I hear you saying. But no, it isn't.

Ok (I've promised I'd not talk about it but...), we all remember of one of the greatest advantages of the CSS design: it allows us to separate the content from its presentation. And why it is so important? Because it is thanks to that that we can reuse our code and make it evolve, avoiding the rework and getting the most from our initial efforts and investments. What we've done today will be reused, and reused, again and again, and it will evolve with the web technologies in a simple, easy way. Bahhh! False! All those wonderful promises of having a reusable and accessible content proved to be empty. It is obviously not enough to have the all-mighty style-sheet, of course not.

So, why so many fuzz with the style-sheet? And why so few attention to the markup?

Any style-sheet, no matter how optimized and well thought it may be, can save a bad markup. And, let's face it; a CSS can never be optimized while the markup is not. If the markup is not valid, if it is redundant and lazily crafted, we can turn our style-sheet upside-down, but the design will always be compromised here or there, and we are surely going to spend more time debugging our javascript asking why things don't behave as they should in Internet Explorer. Worst, if the markup is bad, invalid, without semantics, where lays the interest of keeping separated the content from the style? Where is the difference between that method and the old, unstructured, polluted method of creating web pages using tables?

You see? We won't be able to keep and reuse our code anyway. Our content won't be identifiable and accessible by other systems or applications: no semantic or content structure will lead to difficulties in content targeting. If you cannot target a specific content, you cannot manipulate it.

Maintenance will be a chaos either. A time consuming chaos will be the consequence of the “cascading” errors that often occurs with bad markup. I'd say: “Why bother? Let's get some old version of FrontPage to build our next site.” Honestly, it is almost the same thing.

“The CSS... huuum... I don't know it much...”

But the style-sheet is the all-mighty, isn't it? And it is able to make our sites as bright as it can make it a trash. At least, that's what the “urban legend” says. Indeed, we often face javascript bugs or display issues that are credited to &mdash quite quickly, I dare say &mdash to the CSS: it is the style-sheet that's badly done, it is it that doesn't deal with this element or that, and it is it that is incomplete, that is awfully complicated, and so on. But we just need to take a closer look at the markup (and no, not the CSS!) to realize that the style-sheet just can't do miracles.

Surely, most of the time problems come exclusively from a bad, corrupted markup. Nonetheless, some people still credit unnatural powers to the CSS, like those of clairvoyance, for example: in fact, some expect it to guess the way we want a content to be displayed, no matter how it was structured. For example, if we take the following markup:

<p>a paragraph with a
<h1>level1 title in it</h1>
<h2>and of level2
</p></h2>
			

The markup above is not just invalid, it is also illogical: why would somebody try to put a title inside a paragraph? What are we trying to do here? A medium wouldn't be able to answer the logic behind this portion of content or how to display it. The CSS wouldn't either. So, the responsibility goes to each user agent. They will have to torture themselves to interpret (or to ignore) the errors and to recreate its own logic. One thing is certain: we can't control all the display or behavior issues that this portion of markup will have to face.

Love Thy Code

Let's forget the style-sheet a little and cherish the markup. If you take any programming language like C++ or javascript, all of them have a strict syntax to be respected, as much as a series of best practices. The HTML, being a markup language, is not different, and there is nothing arbitrary or futile in its logic. And that's good! So, why can't we give the necessary attention to it?

The way we write our markup is the most sensible point of all the content/style separation philosophy. Think of your code HTML as the foundations of your house. You can change once a year the wall papers, you can paint your windows each three years, you can change all the furniture every month if you like, but you cannot easily modify the foundations of your house, not without big efforts, lots of time, and lots of money.