In the long forgotten stone-age of the internet, markup was routinely mixed with presentation much as the alchemist mixed their secret potions in the hope of getting gold. As designers we wanted big, bold, red headlines and the font tag was wielded with complete disregard for the semantic “meaning” of the text to which it was applied. But thankfully within a few years CSS was born. With its advent, it was suddenly possible to return to a more simplistic and semantic markup – afterall this is what Tim Berners-Lee and company had in mind when the original HTML specs were conceived. The idea of markup was to describe an element’s purpose or meaning without regard for how it would be presented. And with CSS, we could use an h1 or h2 to emphasize the importance of an element, but style it however we wanted without it losing its “meaning” in relation to other elements. Not only did this lessen the amount of markup that we had to deal with, by externalizing the CSS we had achieved two other important goals. First, we could modify a single CSS rule and effect all (or some) of the page elements spread across multiple pages in one fell swoop. Second, we began the journey down the progressive enhancement road.
If you’re like me (old), then you might remember those early days of the web as the browsers began their slow embrace of CSS. But then again, maybe you don’t remember those days – or you didn’t “notice” it, because you didn’t have a browser that supported CSS. And that’s the important part. If you didn’t have the latest and greatest browser, you still got content (if proper seperation of markup and presentation techniques were used). It’s all about properly marking up the content to begin with. Then, the presentation “layer” can work its magic in numerous ways. In fact, as my good friend Dave Shea’s site, CSS Zen Garden, so wonderfully illustrates, the very same semantic HTML markup can be presented in an unlimited number of ways. (Side note: if you’ve never visited Dave’s shrine to CSS creativity, run, don’t walk over there!)
Thanks to my colleague for prompting me to write this – I hope it makes sense – and either way, I would love to hear your thoughts and comments on the subject.