OpenIDDefending Structural Markup
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.
- 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.
- 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.
- 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.
- 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.
Simon, I'm looking forward to your tutorial series. I'm a "working class, one-stop-shopping" web designer whose client base is exclusively small businesses, non-profits and the like. As such, those clients want a good-looking website that works in ALL browsers and doesn't cost much. I can't afford to create multiple sites to overcome the limitations of various user agents. I have to use a "one size fits all" approach.
As a result, I make compromises daily in deciding when and how to use CSS. Frustrating? Yes. But that's life. I want to get better at what I do, but each step into CSS is a step of faith!
Eric - 5th May 2003 00:32 - #
Eric, I find your comment interesting. I am also a one man shop with small clients. And for that very reason I do all of my sites exclusively with CSS. Because I can't afford to build everything into complex tables. They will want to change things. And when they do CSS lets me do that in a fraction of the time.
And Simon, I look forward to reading your tutorial. I would still like to find a resource that teaches XHTML/CSS web building from the ground up. I know a lot of people who are just know getting into the web and it's very hard to find good resources that will help them learn things right the first time. Most intro to HTML books/sites teach super sloppy HTML and don't even touch on CSS, and most intro to CSS books/sites assume you already know how XHTML works. Just a personal rant I guess. Things are getting better, and that is a good thing.
Xian - 5th May 2003 09:33 - #
Harry Fuecks - 5th May 2003 10:22 - #
Matt Jones - 5th May 2003 10:23 - #
Harry, I don't think that would be a good idea. I think we should move toward a semantic, XML based web. Hence XHTML. CSS is enormously important in that it provides presentation criteria for different media (aural, screen, or print). This makes your content universally accessible which should be the goal.
ninja - 5th May 2003 13:29 - #
About 3 months ago I was exposed to CSS when our developer at Cingular.com started coding our new site templates. He was using CSS2. I love a challenge so I soon was teaching myself CSS2, slowly but surely. Asking questions and then finally I have a site I am now attempting to complete using the same technology.
I have to say at first I was frustrated. It wasn't as straight forward as tables, with the whole "inline, float" etc.. After struggling for a few hours, the same way I struggled to understand table columns, rows, spans, % width and hard coded widths and how they all work together.
It's frustrating when you have been doing something for 4 or 5 years (or more) and you are fairly high up on the food chain in experience. All of the sudden CSS comes along and you have to become a newbie once again, maybe only for a short while, but a newb none the less. I imagine that stings the ego of a few people and maybe could be why a some get frustrated, not everyone embraces change.
I am still fairly new to the CSS(P) stuff, a few months strong. I can't even remember when I stopped using the font tag, that was a long time ago.. but the div tag... it introduces a whole new level of complexity!!
Anway, having been using it for long enough now to apprechiate it, I can see how wonderful it is.
For example i wanted to "skin" my clients new site and whenever you come to the site it picks a random color and displays the site in that scheme. This was VERY easily accomplished with a very small JavaScript which picks a random style sheet from a list of three, and then applies that to a cookie for the remaining time the browser is open.
A VERY SMALL script. Wihout CSS I would have probably had to have multiple versions of the site in multiple folder (making content update a nightmare!). I put all of the image calls in the Stle Sheet so that any image colors could be changed as well.
I see the value of CSS and I like it!
My only issue is the way a lot of the sites, when you shrink the browser the div's overlap one another, I hate that.
brandy - 5th May 2003 16:20 - #
Simon, I think that the resistance to CSS is multi-fold. There really are a lot of different 'types' of people that 'rant' on CSS:
I suppose I should place myself in a category... My reservations of CSS actually spans all three of the aforementioned 'types'. After all, these descriptions, while perhaps apt, ultimately reflect my views on the failings of CSS. With the proper skills, experience, and time, we're at a point where we can hack a layout that will give benefits in long-term maintainability, accessibility, and resource consumption (and w/ NS4 out of the way, it's something where it's worth the slight cost in [visual] 'compatibility'). However, as a developer and designer, there's not a day that goes by when I deal w/ CSS where I don't have to fight implementation and conceptual design stupidity/bugs and wonder what these wankers were thinking when they did this. [I should mention my workflow probably. It involves some browser windows [also: DOM Inspector, Style bookmarklets], docs, searches, and testing browsers on-hand, and sometimes TopStyle (but mostly just vim, nowadays) for editing]
[Also, I'd be more tempted by XSLT, but it's a completely bass-ackwards process - you have to design it backward and code it forward - making every change a design and coding nightmare]
leonard - 5th May 2003 17:45 - #
Elaine Nelson - 5th May 2003 17:57 - #
Just to add a point about separation of style and content (or whatever semantics you want to use).
The best way this is acheived is through abstraction of the content away from html completely. Using a content repository and a presentational system (ie website, whether it be CSS/HTML or SVG) is the ONLY way to guarantee useful separation of the two. The whole CSS-P vs Tables argument is irrelavant for all but the most simple html sites. Any more complex site ends up with *some* site specific markup and so the whole swap-the-css to change a site is totally wrong.
That said, I don't think css is wrong, I've designed a few css only sites in my time (an enterprise intranet as early as 2000, fully css, ask Richard Rutter).
What I think is *VERY* wrong is the avangelical tables vs CSS-P argument. THERE IS NO POINT. The argument should be 'whats the best way to ensure forward compatibility for our content?'. In that argument we have the whole meta-data plus structured text VS html. Personally, I think the structured text way is the way to go. This ensures a simple markup which can be viewed as ASCII and doesn't rely on any browser technology at all. Add this to a parameteried data set (title, teaser, body, author, date etc) and a well chosen faceted meta data set and it no longer matters how you render it.
btw check out this from the dawn of css-p
http://www.metafilter.com/mefi/5955
(my comments are at #76775, now we can cut and paste solutions from various people who have spent weeks working things out, the situation is a bit better. Remeber this is pre IE-6 and pre all the nightmares that came with it.. god help us when ie7 hits)
oh.. I'll be launching a new css-p site in a couple of weeks :-)
Tim Parkin - 5th May 2003 21:53 - #
Tim Parkin - 5th May 2003 21:55 - #
Isofarro - 6th May 2003 11:48 - #