Valid (X)HTML - Is it important?

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&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

Wikipedia

Apple

Facebook

Number 10

Digg

Yahoo

Twitter

Times Online

Google

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.