Have you ever visited a website and noticed the compliance or validation badge? The badge usually says something like “HTML Valid“, “CSS Valid” or has the HTML or CSS word in it with a big check mark. There are many variations but the idea is to portray the page as “VALID”.

I got to seeing this enough that I began to wonder what it meant. And why was it important that a page be “valid”.

First, let’s understand what it means to have a valid web page. Then, this will help us why we might want our website to be branded as “valid”.

According to the World Wide Web Consortium (W3C), “validation is a process of checking your documents against a formal Standard … for HTML and XML-derived Web document types”. The WC3 develops and maintains the specifications and guidelines for the web in the interest of keeping standards at the heart of what the Internet is built upon.

These same standards effect how browsers work and render web pages.

So as long as your web pages are written, or generated according to the specifications outlined by the W3C, your website site should be “valid”. This is true to a point, and much easier said than done.

If you have ever undertaken a website design project, you have probably played with your HTML files until everything looked absolutely perfect. Happy with your accomplishment, you pop off an email to all of your friends to proudly show off your new creation. Moments later, one of your friends tells you about a part of your page that just doesn’t look right. Horrified, you bring up the page in your browser and feel relieved for a very brief moment to see it render properly. Then you realize that your friend is using a different browser, and that the trick you read about on the web that caused that cool effect was causing the page to render improperly in certain browsers.

Non-valid pages are relying on the built-in error-correction of the users browser. This error correction acts very different across the various browsers and versions. Not so long ago, many website authors used a trick that worked in Netscape 1.1 and suddenly found their pages were totally blank in Netscape 2.0. As browsers have moved more towards being standards compliant, we see less of this issue with the way browsers render HTML and more problems with the way they handle CSS.

This brings us to the reason why to validate your website.

The difference in the way browsers render a page is a primary reason to validate your code. Many of us start out designing websites with WYSIWYG web page editors that can improperly generate a web page, and not necessarily to a published standard. Running a web page through a validation service will point out where any problems might exist.

Many of use also enjoy the creativity we can engage in when designing a site. When rendered properly, these creative tricks are reason for website visitors to be impressed. But if you’re a designer looking to make an impression on a client, and they visit using a different browser, the effects could be disastrous to our website design careers. Validation helps us stick to the standards.

With the popularity of WordPress and other Content Management Systems (CMS), many web pages are generated dynamically. Validation will help point out any errors in our code where the HTML is not being generated properly.

Using non-standard HTML also introduces the risk of having to rewrite your web pages later. There are HTML tags that are introduced from time to time that don’t last very long in the standards. Using one of these may produce some cool effects. But once the browsers stop supporting it, your page will look like an amateur. Does anyone remember the “layer” or “ilayer” command?

Now that we have some compelling reasons to validate, how do you validate a web page?

The crew at W3C have been kind enough to provide a Free web page validation service that tests your pages against the world wide industry standard. There are other services, but as the W3C has taken lead in an effort to prevent web fragmentation, it makes sense to use a validation service that was designed to work to the W3C Recommendations.

They also provide services to validate specific content such as RSS/Atom feeds or CSS stylesheets, Mobile content, or to find broken links in your web pages. The W3C offers a range of Quality Assurance validation tools.

Now for the a dose of reality.

Once you run your web page through the validation service, you will notice some very unexpected results.

If you have used a DOCTYPE declaration (DTD), you will immediately notice that this value is used to determine how the rest of the page should be validated. This makes a significant difference. The DOCTYPE or DTD is required for HTML and XHTML pages and must be spelled out exactly according to the specifications. What I didn’t realize is that there is even a DTD for CSS Stylesheets as well. Here is a complete list of DTDs you can use in your web pages.

Getting past this first step is a major hurdle to getting your pages validated. Don’t get too frustrated. If you cannot seem to get rid of one or two errors, your pages will still render properly. The specifications and guidelines are still going through changes that are difficult to understand for most of us.

It demonstrates the fact that there is some significant ground to cover before we can say that there are a complete set of standards for designing web sites. It also makes you appreciate how far the industry has come and the work involved to get to where we are today.

Related posts:

1. CSS Frameworks: First Looks
2. Most Popular Browser, Screen Size
3. Browser Statistics for 2008

Related posts brought to you by Yet Another Related Posts Plugin.