Marketing for Libraries Logo

HTML Section: Validation

Quality, error free coding should the goal for all web developers. There are many tools available to help you produce, error free HTML documents. Using an HTML validator along with a CSS validator is as easy as typing in a URL and the results are well worth it! To be safe, you should always use more than one validator to check your code.

Errors can cause disasters in HTML documents. It's difficult to catch every little problem, so it's a good idea to use an automated to tool check your HTML. The HTML Tidy utility will check and fix your markup errors.

HTML5 and Validation

HTML5 is much more flexible than earlier versions of HTML, so errors can often go unnoticed by the latest browsers. However, this doesn't not excuse poor coding habits. You never know when a coding errors will cause a landslide of problems, so it's safest to always validate your code.

Read!
Read Understanding HTML5 Validation by Louis Lazaris.

Read About Obsolete Features in HTML5 by Louis Lazaris.

SPECIAL NOTE: I recommend validating to XHTML transitional for now. In this way, you can catch the big errors. To do this, temporarily use the XHTML transitional doctype while you validate. Then, you can go back to the HTML5 after your document is clean.

Using a Validator

The process of cleaning up your code is called validation. If you're proud of your "clean code," you can even add a logo to the bottom of your page indicating that it is error-free.

HTML Markup Validation Service

Other than typos, the most common problem you'll encounter is with the information at the top of your document including your character encoding statement, DTD, and other information. Be sure that your page contains a DOCTYPE declaration. This is used by the validator to see what version of HTML you say you're using. Different validators are set up for specific versions. If you've got concerns, I'd advice you to copy the information below directly into the top of your document.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Your first stop should be W3c's Markup Validation Service. There are three ways to validate. First, you could upload your document to your web storage space, then provide the URL. Second, you could upload the file to the validation site. Third, you can copy your code and paste it into the space provided. All three options are provided on the page. Click the CHECK button to run your test.

If your code validated, you'll see a message like the following:

passed

You'll also see information about adding an icon to your page stating that your page validated. Copy and paste this code near the bottom of the code on your page to display the validation button.

passed button

Handling XHTML Errors

Let's say that you get the following message:

validation problem

Although it says you have 6 errors, you may just have one error that causes a bunch of other problems. The first error appears at line 14. However, this tag looks fine. Look at the lines immediately before the error to see if you identify a problem. Here's the problem code:

<head>
<title>Exploring, Using, Adapting, and Creating Virtual Field Trips
<meta name="author" content="Annette Lamb" />

Notice that the title end tag is missing </title>. Add this end tag and try to revalidate.

Rather than trying to change a bunch of things to fix a problem. Try one change at a time and see the impact.

CSS Validation Service

You'll use the W3C's CSS Validation Service to check your style sheet. There are three ways to validate. First, you could upload your external style sheet document to your web storage space, then provide the URL of your CSS. Second, you could upload the external style sheet file to the validation site. Third, you can copy your code and paste it into the space provided. All three options are provided on the page. Click the CHECK button to run your test.

Internal Style Sheets

If you want to check the code in your internal style sheet, simply copy the CSS code from your HTML document into the third option "by direct input". DO NOT include your <style> </style> tags.

If your CSS code validated, you'll see a message like the following:

css valid

Since this is not a separate CSS document, you won't get a fancy CSS icon to include on your page. You only get the CSS icon if you're checking an external CSS document using the BY URL option.

External Style Sheets

If you want to check an external style sheet, use the BY URL option. It's okay to have warnings, but not errors.

check css

If your CSS code validated, you'll see a message like the following. Notice that no errors were found, but there were four warnings. You aren't required to correct these warning, but you should be aware that they could potentially cause problems.

css correct

If you wish to include the CSS validation button on the bottom of your page, then click the MORE INFO button. It will provide the code for adding the button to the bottom of your page as shown below:

external css validation

Fixing Errors

There's a good chance you'll be overwhelmed the first time you try to validate. Fear not! It's just like using a spell checker. It will catch things that you wouldn't find without it. It may take you many tries before you get valid code. The easiest way to do this is by simply updating your file on the local hard drive. Save your revision and go back to the main page of the validator and check again. If you choose the upload option you'll have to reupload each time you make a correction.

readRead!
Once you've validated your pages. You'll want to read W3c's article Beyond Validation to learn more about making your pages effective.

Validators

W3C Validator (This should be your first stop)

Other Validators

AnyBrowser.com HTML Validation - Contains an HTML 3.2 Validator

WDG Web Design Group Batch Validator

W3C CSS Validation Service

You can also install a software program on your computer to perform HTML validation. Here are some examples:

TidyGUI

CSE HTML Validator Lite

try itTry It!
Upload your practice page. Then, visit each of the validators listed above. Be sure to read the directions for use. Also, notice whether they provide a logo you can use at the bottom of your page to indicate that your page has been validated.

Resources

Clean Up Your Web Pages with HTML Tidy - Great article by Dave Raggett on HTML Tidy

HTML Tidy - Access to information and utilities

W3C MarkUp Validation Service - Lots of great resources for markup validation


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson