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:
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.
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.
@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.
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.
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.
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.
@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.