Simon Willison’s Weblog

Defending Structural Markup

4th May 2003

I’ve been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I’ve been using CSS for long enough now that I’d started to forget about the legions of web developers out there who haven’t yet realised what they’re missing. Instead of getting stuck in to dissecting other people’s complaints I’m just going to lay down a few of my own core beliefs.

1. If you work with the web professionally and you have not yet started using CSS, you are doing both yourself, your clients and your profession a disservice.
2. CSS may not be a magic bullet, but it offers far more effective ways of creating attractive web pages than HTML alone. “Effective” in this case means maintainable, efficient and accessible.
3. CSS is not rocket science! While browser compatibility issues can certainly cause teething problems, they can be defeated with a little perseverance. Basic CSS (of the kind that can replace several layers of nested tables and spacer gifs) can be picked up in very little time with a huge pay back in increased productivity.
4. You don’t have to ditch layout tables and stop using about presentational markup to begin to enjoy the benefits of structural markup and CSS! (Added 30 minutes after initial publication)

And now some clarification. The core issue I am interested in isn’t CSS vs Tables, it’s structural vs presentational markup. To clarify those terms, presentational markup is when you use HTML markup tags purely to control the “look” of your site in desktop browsers, while structural markup is when you use tags to provide a logical structure to a document and keep visual display information separate, generally through use of a stylesheet. The two are not mutually exclusive; for practical reasons, it is often necessary to add markup to a document for purely presentational reasons. The trick is to minimise this as much as possible.

Why is separating structure from presentation a good idea? From a theoretical point of view, the answer should be obvious: separating the two adds a powerful additional layer of abstraction which allows either to be modified without needing to make changes to the other. The practical benefits come in the form of increased accessibility, better maintainability and greatly reduced amounts of code (compare the size of a presentational HTML page to that of one that uses structural markup and CSS). Being able to change the look of a whole site by modifying a single CSS file is Finally, the ability to re-use content is greatly increased as the clean structure makes it far easier for content to be remoulded for other distribution mediums.

It is true that there are some things (in particular relating to layout) that cannot yet be reliably achieved using CSS rather than presentational tables, almost entirely due to bugs in modern browser implementations of CSS. It is also true that there are a lot of layout effects that cannot be achieved using purely presentational markup. All web designers should be aware that they are working within the limitations of their medium—if you want pixel perfect control of how something appears then go and play with Flash (and throw universal access to content to the wind). Alternatively, the “transitional” approach where presentational markup is used only when there is no other alternative) is a perfectly valid way approach to modern web design.

Enough ranting: I’m going to put my money where my mouth is. Over the next few weeks I will give this blog over to a complete course in structural HTML and CSS, aimed at web developers who know their way around HTML but haven’t yet come to terms with CSS—kind of like Dive Into Accessibility with a different focus. I haven’t planned this, so I have no idea how long it will take or exactly what it will cover. I’m hoping it will lead to some lively discussions and help drag a few more web developers out of the 90s.

Update: Having re-read the above it doesn’t quite say what I wanted it to. My key point was going to be that CSS may not be perfect, and it may not yet be a complete replacement for presentational markup, but it’s an ultra-powerful tool that is ready to be used now and should have a place in any web professional’s toolbox. The promise of a tutorial series still stands.

Update 2: I’ve delayed the planned start of my CSS tutorial series by a week or two.