As a web designer you’re encouraged to write valid code, but is it really important?
I’ve took a look at the reasons behind validation and checked out 25 of the web’s most popular websites to see if they bother validating their code.
What is validation?
Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking…W3C
Why validate, what are the benefits?
1. Non uniform browser correction
Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn’t and you end up with a broken layout.
2. Rendering time
If your code is valid the browser has to do less thinking as it doesn’t have to correct any code, therefore the page will render faster.
3. Future proofing
You never know what’s around the corner in regards to technology but the chances are that if you have valid (X)HTML, you’re ensuring that your website will work with future technologies.
4. Google prefers valid code
Shaun Anderson conducted an interesting validation test; Does Google like valid code?.
This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.
5. Accessibility
A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.
6. Self satisfaction
If feels good when you run a validation check on your site and you see the green bar appear 
What are the common validation errors and how to fix them?
a. Ampersands
This always catches me out. Ampersands must be written ‘&‘ and not just ‘&’. This is true for writing urls too.
<a href="http://images.google.com/imghp?hl=en&tab=wi">b. Quotations
Element property values must be put within quotes.
<body bgcolor="#ffffff">c. Closing tags
All elements must be closed off, even image tags if you’re using a XHTML DTD.
<img src="image.jpg" alt="Image" />d. Doctypes
Your page must have a valid Document Type Definition (DTD) at the top of the page, and take note that it is case sensitive.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">e. Nesting elements incorrectly
Elements must be opened and closed in order.
<p><strong><em>Paragraph</em></strong></p>Do the web’s biggest sites validate?
So do all the big and popular websites out there validate? Below I’ve put together a selection of some of the most popular websites and ordered them from best(valid) to worst.
BBC
Wikipedia
Apple
Number 10
Digg
Yahoo
Times Online
YouTube
Barack Obama
Microsoft
eBay
What about the design community?
Looking at some of the biggest sites (and authors) in the design and technology community.
A List Apart
Smashing Magazine
Web Standardistas
Zeldman
Future of Web Design
Use It
37 Signals
Simple Bits
Freelance Switch
Slashdot
TechCrunch
Conclusion
I think it’s worthwhile validating your websites and it’s good practice. From looking at the sites above however (which are all great sites and designs), it’s obvious that not having a validated website is not the end of the world.
If you’re like me though you’ll sleep better at night knowing your website validates.
Does your site validate?
It was very hard work trying to track down valid websites for this post so it would be great to see some examples. Use the W3C Validator to check your site then submit your link and comments below.
It would also be good to hear your points about validation and if you think it’s worthwhile.
Further Reading
About the author
Hi I'm Lee, a freelance web designer from Belfast Northern Ireland. Like this article? Feel free to follow me on Twitter.
http://carloshermoso.com/
‘No XHTML errors were found’
‘No CSS errors were found’
I think valid XHTML & CSS is sure an important thing
Great job Carlos, we web designers and developers have a job to keep educating the community about standards compliancy, and making sure we set a good example! (and thus my website also validates, of course)
http://www.twentyclicks.co.uk
‘tentative pass’ No character encoding specified. I guess that’s an easy fix at least. CSS valid 2.1.
I really need to re-do my site for 1024 screens and fix up the content but I’ll continue to meet the web standards. I agree with the philosophies of the W3C with regards universal compatability and accessibility. My site is very basic so it’s not difficult to make it valid. I guess I don’t kow enough to judge say…eBay, but maybe that’s partly why it renders so slowly?
clean xhtml and css/web standards matter, but doesnt necessarily mean it has to validate..
the w3c standards tend to nit-pick over the smallest discrepancies that has no bearing over the functionality/browser support/rendering etc. changing the code just for the sake of validation makes no difference in my opinion.
designers in general dont like being told what to do. enforcing the ideology that you’re not worthy of being a web designer if your code does not validate with big screaming red text is pedantic and borderline dictatorial.
most designers have now made the step to integrate web standards into their workflow. This should be enough, we all have too much other stuff to learn, too much to do, than to be worrying about the w3c hammering down your door..
unless its a client’s request, i dont bother checking to see if my code validates. if it works, it validates.
Well put Richard!
I think the question to ask is, why even use XHTML. As of now, it doesn’t serve much benefit since IE (even version
doesn’t support true XHTML.
Personally I use XHTML Strict for my site, and try to make it validate on every page (except for when Wordpress messes up my flash embed code from time to time).
Out of the sites in your list that validate, I think you’d be surprised how many DO NOT validate on their sub-pages.
As far as whether validation is important or not, to be honest users don’t care
‘No XHTML errors were found’
‘No CSS errors were found’
There is no excuse for non validation, its not really that much of an effort is it…
@Richard: “we all have too much other stuff to learn, too much to do” - very true, it might not be worth your time agonizing over validating every page on your site. It’s usually one of those things I’ll do once I finish a website but it usually (fingers crossed) only takes 10 minutes or so to do any fixes.
@Jin: “to be honest users don’t care” - I agree and I don’t see the value in using badges (usually in the footer) that show your page is valid
Thank you Lee! This article so useful and great. I wonder are the unvalid sites owners know this errors
This is going to be another religious debate whether your site should validate or not, between the pragmatic and the purist. I try to validate my code against a strict doctype but I try not to be stressed about it when it doesn’t validate especially if the error is caused by something that is needed by the site.
I make sure that I develop quality websites by validating the code but I’m also a pragmatic designer by giving my clients the experience that they want and need.
Thank you for this article.
Quality article Lee, nice one.
I would say some more common ones I see are the:
Unclosed break tags
<br> –> <br />
Target Blanks
<a href="http://www.yoursite.com/" target="_blank"></a>
Breaking lists
<ul>
<li>list</li>
<li>list</li>
<span>breaking out of list</span>
<li>list</li>
</ul>
I think its a bit of a stretch when a guy/gal says “my site validates” when he/she is just using a custom themed Word Press site… I think kudos go’s to the Word Press developers rather than a “theme” designer…
FOWD fails. The irony.
@Joost de Valk - I just visited your site and I think it looks so nice, so good. I seriously like the layout and color composition.
You have probably notice it, but just in case I just found these CSS error when validating your site:
Sorry! We found the following errors (6)
URI : http://yoast.com/wp-content/plugins/sociable/sociable.css
40 .sociable-hovers Property opacity doesn’t exist in CSS level 2.1 but exists in [css3] : 0.4
41 .sociable-hovers Property -moz-opacity doesn’t exist : 0.4
42 .sociable-hovers Parse Error opacity=40)
45 .sociable-hovers:hover Property opacity doesn’t exist in CSS level 2.1 but exists in [css3] : 1
46 .sociable-hovers:hover Property -moz-opacity doesn’t exist : 1
47 .sociable-hovers:hover Parse Error opacity=100)
I’m sure it won’t be a big issue to be fixed for you.
By the way, I’ll be following your site from now on and keep up the good work!
@Carlos thx for the compliments! The css not validating is actually a deliberate choice. I use opacity, and the fact that it’s not supported yet in css2 is not really my problem, it degradres nicely and all decent browsers know how to handle it
Validating is nothing
But i passed
it
Thanks for the feedback!
I suppose it depends on what the errors are. As Joost mentioned, his CSS errors are deliberate simply because the validator doesn’t see some of the modern CSS attributes as correct but the browsers are able to handle them fine.
Found a good quote from Matt Cutts, Google engineer, on Google not validating.
“Google’s home page doesn’t validate and that’s mostly by design to save precious bytes. Will the world end because Google doesn’t put quotes around color attributes? No, and it makes the page load faster. :)”
I’m pleased that you sleep better at night knowing your website validates. But do you sleep well knowing that it can take upto 13 seconds for it to render? Did you notice how http://www.futureofwebdesign.com takes about 2 - 3 seconds to render. Not bad for a non-compliant website.
I have to agree with what Richard said on the 2nd of December and that unless its a client’s request, i dont bother checking to see if my code validates either. He’s right, if it works, it validates.
I personally use the firefox addon HTML Validator https://addons.mozilla.org/en-US/firefox/addon/249 which validates while looking at the page
I think that HTML validation or XHTML validation is somewhat important but not as important as accessibility. It really doesn’t take much extra time to make a site accessible and valid. I think that it is worth the extra effort.
I am currently doing a contract for the Federal Government of Canada. I am combing through the website of one of their departments (about 15,000 pages) and validating them and making them accessible. Their biggest concern is to accommodate people who have disabilities. And i agree.
@Trumpton: I didn’t realize it took so long, no. Cheers for the tip, will look into it and try and reduce.
@bigfoot: Yes, accessibility (particularly for governments/councils) is a big concern and I think a valid website is a good starting point to making your site accessible
By the looks of it a lot of the big sites don’t take validation too seriously. I work towards getting the site to work in common browsers, there are few benefits to validated code.
Personally I think that’s it’s impossible to start debugging CSS on a site if the (X)HTML doesn’t validate.
However, I also think it’s difficult to get a page to validate when all the code is generated dynamically and probably by different developers. This is probably the situation with a number of the non-validating sites shown on this page.
I’ve made the cut: http://www.seandelaney.co.uk
XHTML 1.0 Strict and CSS level 2.1 - All Pass!
Good comments above tho…
Validation is useful to error check your code and its good practice when you first start site building. Its also good because I often deal with smaller firms who won’t keep updating their basic web design and so will have some future-proofing against web browser updates. The bigger companies you have profiled will regularly be optimizing their sites and will always react quickly to browser updates.
But it’s also true that it is not worth spending too much time on for a commercial project as long as you know why they don’t validate and that there is a good reason for it.
Can you please give tips for avoiding errors when putting flash in the html pages.
@Rajesh: This method is valid as far as I know (haven’t used it in a few years):
<object type=”application/x-shockwave-flash” data=”file.swf” width=”" height=”">
<param name=”movie” value=”file.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
</object>
Check out this article for some advice http://www.alistapart.com/articles/flashembedcagematch
Or you can embed flash with Javascript
http://code.google.com/p/swfobject/
Lee,
I’m using Validome for XML amd XHTML validation.
On my Firefox (fx), I have a web developer extension (with custom menu: validate CSS 3, ATRC accessibility checker for WCAG 2.0 [trial], Validome, Semantic Data Extractor), Colour Contrast Analyser, and Firebug.
They are very useful for the evaluation.
If some sites are not valid X/HTML, it’s fine..as long as they are usable, accessible, semantically enough for universal visitors.
Universal design for universal readers is based on web standard.
Nice post, Lee.
Regards from not-a-web-designer,
Dani
Indonesia
Hi Lee,
I’m a fledgling web designer and have done a couple of projects. I’m impressed with your site and have “Permanent Tabbed” you in Firefox. Some great articles that have led me to validate and be conscientious of how I am implementing code. I just cannot help notice something which I learned from day one (nearly - hehe) is that on any site I build that links to external sites, I ALWAYS use “target=” in the URL. It’s imperative to keep people and your target audience on your site. I did use some links on this page which linked in the same tab (and led me away from your site completely). I then got embroiled in some validation testing and if really distracted, I may forget about bookmarking you or going back to your site. But like I said, I have you “Permanent tabbed”…..hehe….. I just thought I would mention this as I have seen it on other sites and is often overlooked.
Nice advice and tips here.
I work for a website design company that designs websites for Chiropractors. Our marketing website and our client websites all pass. Then I checked our competitors and all had code errors. That matters to me.
Ooops I just checked one site and it has 61 Errors, 38 warning(s) , the other 306 Errors, 5 warning(s).
I do feel the pull to invest the next 7 hours shooting down the errors down one by one, believe me I do, and in the past, I sure did. And if I don’t, a feeling of untideness lingers on in the back of my mind for ever.
But I must live with it as it simply comes down to time and time is money.
My main goal is to make sure that the site(s) produce honest money and if I keep my main goal in mind, then when I finally go to bed at night after spending long hours on the PC I know that I will have some money coming to me for my efforts (validation errors, google PR or not).
Ideally there should be a piece of software to highlight all errors and suggest a fix, I bet there even is, but again, it all takes time.
Even if I had an error-validating-trained monkey, Why not use it in some money producing activity.
Then I would go to the seaside and swim.
And believe me, this is the business side of me talking and forever fighting the non logical, artistic & perfectionist side that would rather forget the real priorities to instead spend countless hours dealing with mind pleasing activities.
Hope I made sense somewhat, not my language.
An informative article, thanks
I validate my code to make sure everything is okay but I’m not too anal about it. I don’t peek and judge at how good a web designer is by validation alone. Most of the time you can somehow sense that the designer did their best to produce a quality product for their client even if their code doesn’t validate.
Thank you for this article.