I have a small pet peeve that I’m going to share with you. On the nights when I finish up a new CSS3 tutorial for Nettuts+ — typically while listening to my favorite Biebster songs — I click publish, and then wait to see how long it’ll take before a reader leaves a comment containing the phrase, “But it doesn’t validate.”
Thanks for the Input!
Here’s the thing about validation: it’s a tool. Nothing more; nothing less; just a tool.
So here’s the thing about validation: it’s a tool. Nothing more; nothing less; just a tool. At first glance, though, it makes sense, doesn’t it? We equate validation with best practices, much like JavaScript and JSLint. Along that line of thinking, why wouldn’t we want a perfect 100% score? Well that’s the thing: we do; however, problems ensue when the score takes precedence over our own logic.
Validating your Designs
To test your markup and style sheets, you can visit:
Alternatively, you can install the helpful Firefox add-on, Web Developer, which, among other things, offers the handy-dandy “Validate HTML” and “Validate CSS” links, as well as the option to validate even your local files.
At this point, a report will be generated, which lists any errors that the validator comes across. But herein lies the rub.
Is Validation Irrelevant?
Absolutely not. I’d imagine that, particularly for those who are just breaking into this industry, the phrase, “websites don’t need to pass validation” confuses the heck out of them.
“Validation is your early-warning system about introducing bugs into your pages that can manifest in interesting and hard-to-determine ways. When a browser encounters invalid HTML, it has to take an educated guess as to what you meant to do—and different browsers can come up with different answers.”
– Opera Developer Community
That said, the final score is, in fact, irrelevant.
Remember the days when we (or at least some of us) pasted those validation buttons to the footer of our websites? How funny; who were they for? The site visitors? Haha; I hope not! But here’s the thing: back then, validation wasn’t really a standard. 
Nope; in fact, if you even bothered to validate your HTML and CSS, you were a standards-embracing, cutting edge dude! Sometimes, it’s easy to forget that web standards is a relatively new concept.
Validate Before you Ask
Years ago, when I used to participate in CSS forums, it never failed: every time a new member requested help on a strange layout issue, our first response was typically something along the lines of, “Your website doesn’t validate. Fix the errors, and then come back to us if there are still issues.” Many times, odd layout issues are the result of unclosed elements, like a div. In these cases, validation can be of tremendous help.
So what changed? Is validation no longer necessary? Does HTML5 allow us to write terrible mark-up without a second thought? Is the new HTML5 doctype magic-infused? Not at all. Validation is a helpful tool that allows us to pinpoint missed closed tags, extra semicolons, etc. That said, the final score is, in fact, irrelevant. It’s not a magic number – that, at 100%, contacts The Architect behind the scenes, and instructs him to apply bonus points to your website. This score serves no higher purpose than to provide you with feedback. It neither contributes to accessibility, nor points out best-practices. In fact, the validator can be misleading, as it signals errors that aren’t errors, by any stretch of the imagination. The HTML4 validator has quickly become out-dated, but luckily the W3C has a new HTML5 validator (still experimental) that’s much improved.
Now, keep in mind that well-formed markup can boost SEO; however, there’s no specific correlation between SEO and a validation score.
HTML5 standardizes many of the features that some browsers have supported for years, such as custom attributes (via the data- prefix), and ARIA attributes, which fail the W3C’s HTML4 validator.
When testing new designs, be sure to check the experimental HTML5 validator option. With this option set, you can use the supported CSS3 properties, custom data- attributes, and more.
How About 75% or Higher?
Never, ever, ever compromise the use of the latest CSS3 techniques and selectors for the sake of validation.
What if we strive for at least a 75% score? I understand the thinking, as I thought that way too at one point; though, again, it’s irrelevant. When validating, your primary focus should be on determining where you’ve made mistakes. Validation isn’t a game, and, while it might be fun to test your skills to determine how high you can get your score, always keep in mind: it doesn’t matter. And never, ever, ever compromise the use of the latest doctype, CSS3 techniques and selectors for the sake of validation.
The dirty secret of browsers is that they never perform HTML validation against a DTD. The doctype you put at the top of the document switches the parser into a particular mode of operation, but no operations involve downloading the doctype and verifying that the code matches. What does this mean? It means that a basic syntax parser handles HTML, with exceptions specified for self-closing tags and block vs. inline elements (and I’m sure other situations as well).
– Nicholas Zakas
What Doesn’t Validate
Dependent upon the options you specify before checking your designs (HTML4 vs. HTML5), the validator will scream like a baby when it comes across:
- Browser hacks
- Vendor-prefixes
- Custom attributes
- Genuine errors, such as unclosed elements
- ARIA roles
Ahh, browser hacks… should you use them? The answer to that question has been debated to death, and it certainly exceeds the scope of this tutorial; however, keep in mind that, for instance, usage of the IE6-underscore-hack will fail validation.
For this reason, many designers prefer to use non-breaking techniques instead.
So:
/* Fails validation */
#myElement {
_position: relative; /* targets only IE6 */
}
Becomes:
/* Passes validation */
* html #myElement {
position: relative; /* targets IE6 */
}
The reason behind this line of thinking is, what if, in the future, say, Internet Explorer 10 will also render properties that are prefixed with an underscore? In cases such as that, your IE6-only (so you thought) styling will also be applied to IE10 and beyond, presumably. Now, the truth of the matter is that this would never happen, as it’d break a large number of websites. That said, this method of browser-targeting is indeed a hack. Except in smaller or rare cases, it’s better to use a conditional stylesheet, or a form of feature detection to target specific browsers.
Vendor Prefixes
While we can all agree that applying multiple vendor prefixes to properties, all for the sake of achieving, say, rounded corners, is incredibly tedious, you should thank your lucky stars that the browser vendors experimented with these technologies before they were officially recommended.
Had
webkitnot experimented with CSS gradients, and had Mozilla not improved upon their suggested syntax, gradients would not be as widely supported in the current generation of modern browsers as they are today. You see, browsers have a huge hand in shaping the future of the web.
.box {
background: #666;
background: -moz-linear-gradient(top, black, white);
background: - webkit-gradient(linear, left top, left bottom, from(black), to(white));
background: linear-gradient(top, black, white);
}
With all that said, the use of these vendor prefixes will cause your style sheets to fail validation. But that’s okay; don’t let that worry you one bit.
Learn the rules so you know how to break them properly.
Unfortunately, even now, many designers elect to use, in our example above, images to create gradients — if only for the purpose of pushing their validation score back to 100%. If you fall into this camp: you’re doing it wrong.
Use Validation…
- To test for unclosed HTML elements
- To check for typos
- To ensure that you haven’t omitted any semicolons
- For peace of mind
- A game. Don’t waste time achieving a 100% score, when you know exactly what you’re doing. However, do use it to point out your mistakes.
- An all-encompassing checker. While it does test for errors, it does not point out bad practices, accessibility issues, etc.
- To be used as an excuse for not embracing the latest CSS3 techniques. The longer you say to yourself, “I’ll use this in a few years…” the further you’ll fall behind.
Validation is Not…
Conclusion
If you only take one thing from this article, remember that validation is simply a tool. As soon as you compromise your own logic and techniques for the sake of appeasing a validator and achieving a meaningless score, it ceases to be a tool. That said, use it, and use it often!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
All In One Banner–jQuery R ... only $8.00 
feelandlive - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
100% agree. It’s just a tool and it’s only as useful as the person using it makes it out to be. Example: a scale tells you your weight…great, but it can’t tell the difference between fat and muscle. Higher weight doesn’t mean you’re fat. :)
the first time i realized that validation isn’t the cure for every problem was when i tried to find a ‘xhtml strict valid’ method of telling an anchor element to open it’s link in a new browser window (or tab).
thanks for this article.
Whoops!
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnet.tutsplus.com%2Farticles%2Fgeneral%2Fbut-it-doesnt-validate%2F
It may be just a tool but that does not mean that we can’t strive to create perfect valid markup, i do agree though that you should not compromise with using the latest techniques just because it would not validate.
Nice one. Completely agree on this.
However, some CSS3 property is still experimental, while it is safe to use now, it still won’t display the same in all browser as they render it differently – not to mention the browser that completely lacks of CSS3 support.
So some of the techniques such as using image to create gradient, rounded borders, etc will still be used for years before they come to be a standard.
Nice article, that will put some people in place ;)
I must admit, i really used to use validation UNLESS something was broken or just plain confusing when coding :D
Great article and I agree with your statements. You’re a great resource to us among the web community and these guys should appreciate all the knowledge you pass to everyone. Now I have to run, getting my bangs done like the Bieberster.
Whatever. But you could make this page and have it validate. Writing an article on a website about web design defending not validating is all pretty funny. Most of the validation errors on this page could be fixed in a few minutes.
With html, yes. With CSS? rarely. The only way to have your stylesheet validate is by removing any vendor prefixes and drop most CSS3 from your selectors. I always strive for 100% HTML validation, but I only use CSS validation to catch last minute bugs, if any.
“You see, browsers have a huge hand in shaping the future of the web” – this is absolutely true. In fact, if every browser followed the standards, getting a 100% validation score would have been much easier! CSS3 is cool but may not be the right choice while designing for clients who want webpages to look exactly the same on each browser.
“That said, this method of browser-targeting is indeed a hack. Except in smaller or rare cases, it’s better to use a conditional stylesheet, or a form of feature detection to target specific browsers” – don’t agree to this fully. Especially, conditional stylesheets are also a form of hack (fooling some browsers to consider some lines as comments?)
Have to agree that this is one good, unbiased article on validation. No usual “validate or die” crap while pinpointing the most important practical facts about validation. Good job, Jeffrey ;)
Thanks for this great article! If you don’t mind, it’s featured and linked on our blog (just an excerpt) :-)
I definitely appreciate the article. When I was brand new to design, trying to make my own WordPress site, I thought everything had to validate. I didn’t really understand what I was looking at so to speak. It would really irk me that some plugins wouldn’t validate. I wouldn’t use plugins because of that, even though they offered a functionality I could really use. Eventually I came to realize that the validator is a good tool when learning code for things like finding missing closings, etc. But that we don’t need 100% validation, once we understand the code and errors. So thanks for laying it all out for me!
Thank god for this,
I have always been Validation obsessed, I guess it’s just a good feeling to have a nice little green banner saying well done to you, But as you say, if it works fine in all browsers who cares?
HTML validation I would say i have to agree with, CSS not at all due to CSS3 and browser specific filters.
Mr. Way do you know what SEO means?
Have you ever practiced it?
Do you know how its calculated?
If yes! stop writing these kind of articles. They are misleading
SEO has nothing to do with a validation score, Johnny.
Johnny i have found a lot of the SEO specialists i have run into on projects don’t have a clue what they are doing.
One once told me i had to make all the footer links tags amongst other ridicules things.
How much does validation count towards a ranking & what search engines hold this against a site? I mean what’s been said here is that the html will still be accessible but the validator might not always say it validates 100% in its opinion.
After reading i can totally see it from your point of view, We do need to push forward & break the rules to a point where we can. As long as a site is accessible by all then i am happy.
I think that somewhere down the line we all forgot that validation tools are only a guide to show us the way not a religion we should live are lives by.
Great article
Although I roughly agree on some points, you seem to forget that validation of websites is also a way of checking if your code is semantic. Not everyone in this world browses with a visual browser, nor do they solely browse on PC’s. More and more devices are trying to render your page and valid code at least ensures you’re trying to make the page readable and ‘logical’.
Now CSS is an entirely different element, but for HTML (in whichever form) I think you kind of take the whole thing too lightly ;-)
You seem to mainly focus on CSS validation, but I think HTML validation is far more important due to the reasons I mentioned above.
Presentation (in my opinion) is inferior to data structure and that’s the main focus of validating your code ;-)
I never said that people shouldn’t validate. I said that people shouldn’t worry about the validation score.
Your statements are in general true, however, there is a situation where you must pass 100%. Many government websites actually make it a requirement that HTML and CSS should pass the W3C validation checker, it often a written requirement of tender requests. In this case it can often result in a loss of contract failing validation… This requirement stems from the belief that valid markup = accessibility and many companies (but mainly government institutions) have written strict rules on accessibilty and it is easier to defend an accessibility case with 100% valid markup.
I completely agree. During a practice interview today by my old college, I was asked some questions to prep me for a real job interview in my field. One question was “do you design without tables” to which my response was “I would have to be crazy not to!”. The next question was “do you validate your websites?” My answer to the second question was something along the lines of “No, actually I don’t. I don’t need to validate my sites for them to work and it wastes the time and money of my clients if I try to make them perfect.” I further explained that in my opinion, commitment to validation is one of the differences between students and professionals. As a student, I cared very deeply about the perfection and completeness of my work; as a professional, I care about whether the client feels like the product they received meets all of their needs on their budget and in their time frame. My compromise between the two perspectives is that I care about the quality of my work to the extent that it doesn’t start to upset the client. Spending the client’s money to win what some people really do see as a game isn’t acceptable on a professional level and serves no purpose.
Also important are the times when validation is simply impractical in practice. I validated my recent portfolio and found a few hanging divs and duplicated ID tags. I was able to validate my main site as HTML5, but none of my sub pages can validate. My sub pages can’t validate as HTML5 because my Facebook and Twitter share buttons use iframes with attributes that are deprecated in HTML5. I can either have my pages validate and look worse in IE, not have my pages validate and look right everywhere, or remove a useful feature and have my pages look right and validate. I’m not sacrificing a practical feature or my design to win a game.
So in short, I agree with you. Validation is a great tool for newer developers or students who don’t have most of the rules and limits in mind anyway. If you want to make a good product, you should never sacrifice anything that works and is tangible for a badge.
I agree with the opinions of htmlthis
It’s absolutely correct dude. Nice Article.
very good article. thanks for sharing
Validation is truly for the pride of the designer as the customer is only interested in the bottom line.
Awesome.
a great article. I like it