START A COURSE

The HTML and CSS Blog:

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

Use the validator before ripping out your own hair (or anyone else's).

Use the validator before ripping out your own hair (or anyone else’s).

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).

When you first try the HTML validator, the magic feels a little more like this

When you first try the HTML validator, the magic feels a little more like this

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

errors everywhere meme

Error 1: I am opening with an <h1> tag but accidentally closing with an </h2>. Curse my sticky fingers!

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.

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.

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.

<!doctype html>

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

Bob Ross would have been a good HTML coder.

Bob Ross would have been a good HTML coder.

Professional web development firms validate their code. It’s not just a tool used by students and novice coders. The best practice in the web design industry is to require that HTML pages pass validation before adding CSS styling. And the CSS stylesheet has to pass validation before adding JavaScript interactivity. So get in the habit of using the validator!

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.