scriptygoddessMark Pilgrim's recent post (why we won't help you) about using HTML validation as a way to troubleshoot layout problems (among other things) got me wondering if I could validate my own HTML. So I did – here are some tips on how you can too:
Validation means you're bringing your markup into compliance with the standards set by the World Wide Web Consortium; because I was a novice and because my main goal was cross-browser viewing compatibility, I chose to validate to the standards for HTML 4.01 Transitional. HTML is being supplanted by XHTML or eXtensible Hypertext Markup Language; if you want to validate to the most cutting-edge standards, you'll want to read more about it. Among other benefits, validation acts as the ultimate proofreader; it catches mistakes you might not find (and might not even know were mistakes) that cause your site to behave strangely in differnet browsers. If you're considering embarking upon a big site overhaul like skinning, this kind of effort is worth it, because you'll move forward with cleaner code.
The nuts and bolts of validating involve checking for and correcting errors; to do this most effectively while my main site was still live, I moved a copy of my index page to a test blog – no risk of ruining the template because my main site could serve as a backup copy. Another reason to use a test blog? You will always want to validate the source code of a live page; that's what people will see when they view your site. If you try to validate a blogging template before any PHP scripts or template tags have been processed when the page loads, the validator will give you error messages because it won't recognize the tags. When I first ran my page through the W3C HTML Validator, I discovered 103 errors. Let that sink in for a moment. Then I realized that the validator was picking up two kinds of mistakes: 1. errors in the code used for the templates, and 2. errors in the code in the entry text. Every time I corrected an error in the template code, it removed multiple instances of that error on the index page – the number of errors I found started dropping sharply after I figured that out.
In addition to the W3C validator, I used this excellent HTML resource from Ian Graham; which helped me understand what tags could be used where, and what tags were deprecated, or out-of-date. I used HTML Validator Lite to help me interpret the more obscure messages I got from the W3C validator. I didn't know which standard HTMLValidator Lite was using, so I doublechecked the changes it suggested on another test page before implementing them in the final corrected template. Many people recommend using HTML Tidy; my page was so far from valid when I started that Tidy had trouble processing it.
Other good things to be aware of (or "let my mistakes save you time"): Many of the errors I encountered were as a result of the improper handling of special characters in Javascript (like the "Blogroll Me!" link) or HTML (like a link to an item on Amazon.com) in my templates. I used the Hiveware URLCleaner and the CleanURL bookmarklet to give me the ASCII equivalents to characters like the dreaded ampersand. I made sure that each and every page had a DOCTYPE at the top; it's the validator's way of recognizing what kind of text you're about to feed it. I was under the mistaken impression that tables don't validate (this comes from hanging out with people who use and love cascading stylesheets); table tags must appear in the proper order (be properly nested) to ensure that designs with tables validate. Finally, if you do want to skin your website and you want it to be valid, you can; each skin you implement needs to be checked against the output of the validator.
Sound complicated? It's not nearly as complex as trying to ask for help when you're not sure what the problem is ("My site doesn't look like I thought it would in Browser X. Why?") Being able to say "My site validates, and I'm still having problem X" puts you a lot closer to a solution because more people will have an idea of what you're talking about. Don't be intimidated – give it a try. If I can do it without pulling my hair out, anyone can.
Guest authored by:
Donna – deliriouscool.org
