How important is HTML and CSS validation?

How important is HTML and CSS validation?

By Karinne Legault on January 16th, 2009 in Articles

The HTML and CSS validators are tools that exist to help you "spell check" your site. It won't make your code better but it will weed out forgotten tags.

As I write this, it’s still one of the most debatable questions in web design:

“Why should I validate?”

There will always be 2 sides to everything and this issue is no different.

“Validating is a waste of time!”

“Validating ensures that you have clean code; nested tags, all tags closed, alt attributes are there, etc…”

Of course, if you take validating as a way to get a nice badge from the W3C on your website, then I have to agree, validating is not necessary. However, validating to weed out

tags that have been forgotten or a “;” missing from your stylesheet, then validating your HTML and CSS is very important.

Have a look at this simple code and see if you can easily spot the mistakes:

/*** NAVIGATION
********************************/

#navigation {
    backround: #fff url(../i/navigation-bg.jpg) repeat-x 0 0;
    height: 65px;
}

#navigation ul {
    margin: 0;
    padding: 0 0 0 15px
    list-style: none;
}

#navigation ul li {
    float: left;
    display: inline;
    padding-right: 10px;}
}

#navigation ul li a {
    height: 29px;
    min-width: 10px;
    color: #000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    padding: 6px 7px 0;
}

#navigation ul li a:hover
    background-color: #7fefe7;
}

Did you catch all 4 errors? Simple stuff right? But after looking at 400 lines of code for a few days, especially your own, these 4 simple errors can easily be overlooked. Then you’re beating your head against the door wondering why your footer is at the top and your sidebar under your portfolio boxes. Two days of swearing thinking it’s your browsers’ fault again.

If you had decided to validate your CSS before making a dent in your door, you would have also saved yourself the headache you will most likely get.

The CSS validator is very easy to understand. Here’s what it returns:

html-css-validation-1

That was much less painful than sitting there for 2 hours looking at code.

The important thing to understand is that no matter how well a site validates, it doesn’t mean that it’s the best coded site. You can validate all you want but if you are using a bunch of span elements and style them to look like headings instead of using the proper elements (h1-h6 elements) then your site is still not properly coded. Using the right element for the right purpose is not something the HTML or CSS validator checks for. That’s something you have to learn and/or know.

The HTML and CSS validators should be used as spell checkers. Nothing more.

Did you like it? Share it!
  • Delicious
  • DesignBump
  • DesignFloat
  • Digg
  • Facebook
  • StumbleUpon
  • Technorati
  • Twitter
About The Author
Karinne Legault

Karinne Legault has 10 years of experience in the Web Design industry. You can see her portfolio at karinnelegault.com and her blog at karinne.net.

Comments
  • January 18th, 2009 at 4:51 pm.

    Great post! My teammates quickly learned that I wouldn’t fix their problems for them unless their code validated. Valid code is just one way to eliminate one more source of problems. If you know your code validates, then you can move on to other causes – like browsers, conflicts, and so on.

  • January 18th, 2009 at 8:11 pm.

    @Jennifer – I totally agree! Once it validates at least you know the bug isn’t caused by a tag that isn’t closed or something like that.

  • March 25th, 2009 at 11:26 am.

    i think validation is not important lol the important is how you manage your site to gather more to insure you can have so many costumers to buy your stuff

  • April 18th, 2009 at 9:41 pm.

    I tend to get layout problems when I place a div in the wrong spot, or wrap a div improperly – which unfortunately is not caught by W3C. (Obviously) :)

    Also, I think one point you missed was that validation is important for proper SEO. Good article.

  • November 3rd, 2009 at 4:25 pm.

    I disagree. Validation ensures browser compatibility among other reasons you listed above. An unvalidated site is as bad as have drop shadows on everything in a design. If you don’t take the time to learn proper coding, you’ll never be an excellent developer.

    Validation has:

    *speed up my coding time
    *speed up browser compatibility
    *cleaned up code
    *made it easier to update in the future
    *makes you look like you know what you’re doing – no reputable agency should ever hire a developer who doesn’t validate.
    *Improves SEO

    Not to offend anywhere here who agreed with the post however.

  • November 3rd, 2009 at 4:40 pm.

    Or perhaps I read this post wrong (sorry!) but you are right, semantics, which the validators don’t check for, are just as, if not more important than validation.

  • November 3rd, 2009 at 6:13 pm.

    @Amber – I totally agree! I’m just saying that some people tend to take the validator like the tool to prove they code right, which in my opinion is not entirely true. Yes, you’ve got all your tags closed but if you’re using a span (or div) element with a bunch of CSS properties to mimmick the heading element, then you don’t know what you’re doing.

Trackbacks

Toggle Trackbacks

  1. [... As I write this, it’s still one of the most debatable questions in web design: “Why should I validate?” There will always be 2 sides to everything and this issue is no ...]

  2. [... As I write this, it’s still one of the most debatable questions in web design: “Why should I validate?” There will always be 2 sides to everything and this issue is no ...]

So, what do you think?

x