Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Check It Out - W3C's HTML And CSS Validators
(Part 2 of 2)

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

Originally Published: Mar 2005

In the last issue of Joy Gems (Part 1 of 2) I explained the purpose of validating your XHTML/HTML and CSS files. The benefits are many. I just touched on a few that came off the top of my head.

But where are the validators?

That's the question I didn't answer.

While there are many code validators that can be run online (or from your own computer following software installation) to check a single file I prefer the W3C's HTML and CSS validators. With both types of validation you have the option of validating a file from a server or checking a .html or .css file that resides in your computer.

HTML Validation

Start with the home page for W3C's HTML Validation Service. Here's where you can enter a URL to check or upload a file from your computer. No matter which way you choose there's a link to an "Extended Interface" which gives you lots of options as to how you want your file to be validated and the report that will be generated on a web page following validation.

Normally I leave the Encoding and Doctype settings on "Automatic Detect" but you can make adjustments to validate the oldest HTML to the newest XHTML specs. (All of your files have to have a DTD and encoding information in a meta tag in order for the validation process to work smoothly. I'll get to that in a future issue of Joy Gems or you can read up on that at the W3C.)

And I usually check off the "Source Code" option in addition to the "Verbose Output" option (which is checked off by default). All this means that following validation I'll get an explanation of what's wrong with my markup (code) and where in the file the problem code occurs. Very handy.

When I make revisions to my file I start with the mistakes at the top and eliminate them one by one, re-validating eh file as needed as I go thru the process of perfecting my file and getting it to become a "well-formed" document.

Along the way, you'll learn what's the best way to write code and what are things to avoid. The more you work with validation the less often you'll be using it as you'll become very proficient in writing your files.

That's what I mean when I say that validation is a great teacher.

If you're still not sure what XHTML/HTML validation is or need additional information make sure to see their FAQ.

CSS Validation

This works a lot like the HTML Validator in that you can check to see if a .css file is up to snuff by either entering a URL or uploading a file from your computer.

Start with the home page of the W3C's CSS Validation Service.

As with the HTML Validator you'll see a link to "Extended Interface" which allows you to fiddle with various settings before you check a .css file. I've never used it but now I know that it exists!!

There's a new feature that allows you to copy and paste CSS code that you'd use between <style> </style> tags into a text box.

After you submit your .css file (or code as noted in the above paragraph) the validator will generate a web based report much like it does for the XHTML/HTML process. It'll tell you if there are any errors or "warnings." You'll want to revise your CSS and re-validate in the same manner as you do for a .html file and work towards removing any troubled areas until your CSS has reached conformance with the CSS specifications.

Remember, these are two very good validators but there are others. As good as they are they will only validate on file at a time which isn't going to work when you want to check hundreds if not thousands of files.

Part 1 of 2