This Validates!

… The charge a designer gets when running a site through the W3C’s validation tool. Great, now this site is squeaky clean and there’s not a thing wrong with it! This is probably never true.
Jason Kottke has written up some very interesting thoughts on web standards and semantically rich documents. He has many valid points (sorry). But seriously, it’s a problem.
When designers see using valid XHTML as a religious activity, there’s bound to be little or no semantic structure to the document. That said, I can agree with Doug that creating pure semantic structure while at the same time making it look great is a challange that’s nearly impossible. Given the current state of CSS support anyhow.
But that’s where the balance comes in, and I’m reminded of Tantek’s A Touch of Class post from way back when. I’ve found that one of the biggest problems with newly authored XHTML is the overuse of the class attribute. The document might validate just fine, but there’s a class assigned to just about every element in there. Not to mention the possibility of table and font tags for presentation that Jason rightly points out will still validate despite the fact that they may be littering the code all over the place. I also attempted to comment on the subject back in April.
The validator is dumb (literally), and unfortunately is sometimes used to validate the designer first and the code second. We don’t have a semantic validator and probably never will, but the smarter we get about structure, the closer we’ll get to seeing improvements.
Like Dave, the best thing I could recommend to any designer/developer looking to really understand that balance is to pick up a copy of Jeffrey Zeldman’s new book Designing With Web Standards. Read it. Live it. The guy knows what he’s talking about.

12 Comments

  1. JumpTheGap says:

    Write a absolutely good, accessible, semantic and standard markup seems to be a romantic dream of each single web designer/developer. Anyway, I’m sure, talking about it can only help to make a better WWW.

  2. phaistonian says:

    We all know what’s right yet we all avoid the optimal solution to a small challenge in order to gain time. I guess what’s we’ll keep doing. It’s just how human nature is meant to be.

  3. Jeremy says:

    Still getting through the book, but you’re right, it’s an amazing resource.

  4. Jason says:

    Here, here! That book is the best thing since sliced bread. It’s my new bible and no web designer should be without it.

  5. Dan R. says:

    I’m still forming a complete opinion on this issue (which is why there’s no post on my site about it yet) but I think I agree with most of the points made so far by Dave, Dan, and Jason.
    Responsible designers realize quickly the benefit of using proper semantic structure whenever possible — true, there are plenty of folks creating sites that are valid XHTML/CSS but not semantically structured, but I believe a certain percentage of those designers are still just getting their feet wet where XHTML/CSS/semantics are concerned, and for a designer it is easier to learn how to work with CSS for presentation, and then learn how to structure their XHTML, than the other way around.
    Semantic structure is not a visual concept in the way CSS positioning is. Semantic markup is (mostly) unrelated to a designer’s job, which is why I say that responsible designers will follow a natural path to semantically rich markup once they’ve figured out the visual details of XHTML/CSS.

  6. Mike says:

    Dan, I really agree with you about young guns throwing the class attribute all over the place. I’ve been trying to code my pages’ CSS around where elements are placed inside the overall scheme of the page as opposed to defining only random instances. And by checking out the source of the pages you’ve designed (this included) it seems as though you do the same.
    If a confused look is creeping across anyone’s face at this point, please bear with me, I’ll explain everything.
    Say you have your page structurally broken up into sections like #topLogoAndBreadCrumbs, #rightNavAndLinks, and #mainContentBlogEntries (painfully obvious names I know). If you only have a few different styles in each section, there is no need to pepper class attribs throughout your code, just define your styles by where they are in the flow of the document.

    #top h1 { /* main logo style */
    color: #777;
    font-style: bold; }
    #top h2 { /* breadcrumbs */
    color: #222;
    margin: 0 0 15px 0;
    ... }

    The goal is to define the main structural elements once at the beginning of your CSS (the hn‘s, the p’s, the a’s), and then redefine portions of those style definitions when needed, depending on where those elements reside in your code. You wanna have your h3 with some added margins only in the nav section? Define it as such.
    Structurally pure CSS? I think so ;)

  7. Dan says:

    Well said, Mike. Exactly what I was getting at. It’s a really simple way to reduce your markup. Use the power of contextual selectors.

  8. sam says:

    indeed. contextual selectors are incredbily useful & powerful, imho.

  9. Dan says:

    Simon – Right on. This is a great little writeup. Thanks.

  10. Anonymous says:

    Got no errors from W3C’s?! Congratulations… and respects… I have never got for the first time checking (with no corrections). especially on large or complicated sites… like mine or others

  11. The Homeless Guy says:

    Got no errors from W3C’s?! Congratulations… and respects… I have never got for the first time checking (with no corrections). especially on large or complicated sites… like mine or others