Use HTML Validation to Automatically Check for Code Errors
What You’ll Learn in This HTML Lesson
Is your code valid? This post will teach you how to validate HTML. You’ll learn how choosing the right Doctype will help you insure your page is truly valid and you’ll get tips about using the W3C Validation service effectively.
Validate HTML Automatically
When you have first written your web page, there are likely to be some errors. Hey, that’s OK, nobody’s perfect. You can spend hours pouring through your code, looking for that one stupid misplaced comma. But then by the time you finish your website, you won’t have any hair left on your head. Instead, validate your HTML with an HTML checker.
W3C HTML Validator
The World Wide Web Consortium offers a free automated validation service to check for errors in CSS or HTML markup. I usually just Google “HTML Validator” and look for the w3org HTML validator (why memorize anything more than I need to?).
You can validate for errors in more than one language; I frequently use the HTML validator and the CSS validator. I like using the W3C Validator because it gives me an error report instantly, saving me hours of searching for code errors. It feels great when your page passes validation!
Doctype Declaration for Validation
Just like your browser, the validator needs a Doctype to validate; it needs to know what your expectations are: are you trying to follow strict XHTML standards or are you using the newer HTML5 standards? The Doctype will affect how the validator decides what is an error and how much to report to you. (If you don’t know what a Doctype is, see our lesson on Declaring a Doctype.)
Using the XHTML Doctype
Choosing the XHTML doctype informs the Validator that you care about being strict with syntax, and you are following strict XHTML standards. Strict standards include self-closing non-container tags (<br /> <hr /> <img />), using lowercase for tags, and always using quotes around “values.”
Using the HTML5 Doctype
Choosing the HTML5 doctype informs the Validator that you care about using HTML for structure only, and specifying all visual presentation in CSS. The HTML5 Doctype triggers the Validator service to report any stylistic HTML attributes as errors. For example, the following tags are deprecated in HTML5 because their only purpose is presentational, and therefore they should be handled with CSS: <center> <font>. The following HTML attributes are deprecated, also because they are for presentation only: align, valign, cellpadding, cellspacing, border, height, and width.
How to Validate HTML Effectively
It took me a while to get accustomed to using the W3C Validator. It reports the errors in the most irritating, difficult, computer-driven tone possible. Hal’s less-articulate cousin. Here are a few tips and examples to help you make the Validator service your friend (a real friend, not just a FaceBook friend).
Tip 1) Turn on Your Line Numbers
The error report calls out the line number where your error is located. That’s helpful! If you can’t see line numbers in your text editor, then look in the View Menu for an option to turn them on.
Tip 2) Revalidate Often
Really important: Fix one error, and then revalidate. Often one error in code causes the validator to report a string of errors. Get a fresh report! Otherwise you will go mad looking for excess errors you’ve already corrected. The HTML checker will tell you every little tiny thing. For example if a single missing bracket makes the validator think all the code after is part of the same tag (because you never closed the tag) when you fix it, all those other errors go way. So you don’t need to panic if it says you have 36 errors. You probably only have 5 errors. Good to know!
Tip 3) Are you Talking to Me? Get Used to the Validator’s Manner of Speaking
You have to get over the cold and robotic tone of coding language. It almost sounds like it was written by a non-english speaker translating something they never read. Many of us have become accustomed to turning off when we read messages written by a computer. After all, most error messages delivered by computers don’t tell us much. With experience, you’ll get used to understanding computerspeak. Of course you also need to understand HTML to correct your errors, even with the aid of the HTML Validator it’s not magic. (Hopefully our HTML tutorials will help you.)
Some Examples of HTML Errors, and How the Validator Reported the Error
Error 1: I am opening with an <h1> tag but accidentally closing with an </h2>. Curse my sticky fingers!
<h1>This is my important heading.</h2>
error report: end tag for element “h2” which is not open
Error 2: I opened list items, but forgot to close each of them in the following unordered list.
<li>70’s Sound Track
error report, error 1 of 2: document type does not allow element “ol” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag
error report, error 2 of 2: document type does not allow element “li” here; missing one of “ul”, “ol”, “menu”, “dir” start-tag
Error 3: I forgot to put any alternative text description on my images.
<img src=”my picture.jpg” width=”100” height=”200” />
error report: required attribute “alt” not specified
Error 4: Oops! I forgot the Doctype.
missing: <!doctype html>
error report: No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.
Error 5: I used the new HTML5 Doctype.
error report: Using experimental feature: HTML5 Conformance Checker.
Error 6: I have an XHTML Doctype, and forgot to self-close my break tag (an open tag).
error report: end tag for “br” omitted, but OMITTAG NO was specified
Error 7: I have an HTML5 Doctype, and I used presentational attributes in HTML (that should have been specified with a CSS stylesheet).
error report: The align attribute on the h1 element is obsolete. Use CSS instead.
I hope these examples help you get familiar with the HTML validator, and make it easier for you to create perfect valid pages.
Tip 4) Best Practices in Web Development: Your Page Must Pass Validation