Valid (X)HTML - Is it important?

December 2008

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.

Validation

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&amp;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
BBC
Wikipedia
Wikipedia
Apple
CM Capture 12.png
Facebook
Facebook
Number 10
Number 10
Digg
Digg
Yahoo
Yahoo
Twitter
Twitter
Times Online
Times
Google
Google
YouTube
YouTube
Barack Obama
Barack Obama
Microsoft
Microsoft
eBay
eBay

What about the design community?

Looking at some of the biggest sites (and authors) in the design and technology community.

A List Apart
A List Apart
Smashing Magazine
Smashing Magazine
Web Standardistas
Web Standardistas
Zeldman
Zeldman
Future of Web Design
FOWD
Use It
Use It
37 Signals
37 Signals
Simple Bits
Simple Bits
Freelance Switch
Freelance Switch
Slashdot
Slashdot
TechCrunch
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

Sponsored link: LusterForever.com - Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.

Receive more design content like this to your inbox

I promise not to spam you. No more than one email per week.

I blog and share links about web design, user experience, product development, HTML/CSS, email design and anything else I find interesting.

No thanks