How to Use the W3C HTML and CSS Validators

All Web pages done for this class must validate, with no errors, according to the W3C's online HTML Validator.

Validators are also called "conformance checkers" because they check the page's code against a technical standard; when they indicate an "error," it means that the code does not conform to a specific standard. How do the W3C's validators decide which technical standard to use? The HTML validator and the CSS validator differ in this respect.

The HTML validator looks at the page's DocType, usually the very first line of code in the page's HTML. The DocType is a statement of which standard the document is supposedly following. So if the page uses an "XHTML 1.0 Strict" Doctype, for example, the validator checks to see if the page's code conforms to the XHTML 1.0 Strict standard. Likewise, If the page uses an HTML 5" Doctype the validator checks to see if the page's code conforms to the HTML 5 standard

The CSS validator does not look at the page's DocType, as the DocType only indicates an HTML standard, not a CSS standard. The CSS validator simply defaults to the current version of CSS (at the time of this writing, the current version of CSS is CSS 3).

For the Cabrillo DM60A, DM160B, and DM160c courses, we will generally validate our code using the HTML 5 standard, although specific assignments may require using a different standard. Additionally, all pages using any external, internal, or local cascading style sheets (CSS) done for this class must validate, with no errors, according to the W3C's online CSS Validator. These validators, and other useful tools, are found at http://www.w3c.org/

Note that even though a page's HTML code or CSS may validate with no errors, the page may still contain other errors. These validators will not know if your file paths are incorrect, for example.

Sometimes the validators may give you "warnings" and suggest better coding practices. Warnings, unlike errors, do not need to be fixed for the page to be considered "valid." But if you get a warning that your page contains a byte order mark (BOM), you must fix it. See Text Editors for HTML and Script Editing for more inforamtion.

If you put validator buttons on your page, you can validate the page by simply clicking on the button!

How to Use the W3C’s HTML Validator

1) Add the appropriate DocType Declaration to your document.

To use the “HTML 5” standard, place the following line of code at the very beginning of your document, before the <html> tag:

<!DOCTYPE HTML>

To use the “XHTML 1.0 Strict” standard, place the following line of code at the very beginning of your document, before the <html> tag:

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

If you use the above DocType, you will also need to use the following for your <html> tag:

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

To use the “HTML 4.01 Transitional” standard, place the following line of code at the very beginning of your document, before the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

2) Upload your page to the Web server.

3) View your page (the page on the server, not the page on your disk) in a Web browser. (If the URL that you see in the browser's address window starts with "file://" instead of "http://", it means that you are viewing a page that is on your own local disk, and not a page that is on a Web server.)

4) If you have placed buttons or text links on your page that link to the W3C's HTML validator, simply click on the button and see what the validator says about the HTML of your page.

If you do not have validator links on your page, copy your page's URL from the browser's address window. Then go to the online HTML Validator. In the Validate by URI section, paste the URL of your page into the Address field. Click the Vaildate this page button.

5) If there are any errors, correct them, re-upload the page, and validate it again.

Required attributes (that are sometimes forgotten)

<img> tag

All <img> tags require an alt attribute, an alternative text description of the image, as shown below:
<img alt="dog" src="dog.gif" />

For invisible pixels used as spacers or shims, use the empty alt value (nothing between the quotes) as shown below:
<img alt="" src="cleardot.gif" />

<area> tag

All <area> tags (used in imagemaps) require an alt attribute, as shown below:
<area alt="dog" shape="circle" coords="97,58,57" href="dog.html" />

<map> tag

All <map> tags (used in imagemaps) require an id attribute, as shown below:
<map id="dog.gif" name="dog.gif">

<form> tag

All <form> tags require an action attribute. Normally the value of the action attribute is the path to a CGI or PHP script that is on the server. However, if your form is not meant to be processed by a script on the server (perhaps it is meant to be used with JavaScript), use the empty action value (nothing between the quotes) as shown below:
<form action="">

<script> tag

If you use JavaScript, your <script> tag needs to have a type attribute:
<script type="text/javascript">

A “Referer Header not found” message

If you have placed buttons or text links on your page that link to the W3C's HTML validator, and you click on the button and get a "Referer Header not found" message from the validator, this almost always means one of two things (usually the second reason below):

1) You are going through a firewall that is interfering with the information being sent to the validator. (This sometimes happens to Windows folks who use ZoneAlarm security software, and have it set to an extremely high level of security.) If this is happening to you, you should configure your security software to allow headers from the W3C domain.

OR:

2) You are trying to validate a page that is on your hard disk (a "local" file) instead of trying to validate a page that is on a Web server.

While you are viewing a page in your browser, look at the URL in the browser's address bar. If the URL starts with the word "file" as in:
file:///Users/john/Desktop/duh.html
it means you are looking at a file on your disk, not a file on the server.

If the URL starts with "http" as in:
http://webhawks.org/~dm60asmithjo/
it means you are looking at a file on the server.

The validator buttons are meant to work with a (remote) file on a Web server that is reachable through the Internet, not with a (local) file on your hard disk. If you are trying to use the validator buttons on a local file, you'll instead need to upload the file, view the file (the file on the server, not the file on your disk) in a browser, and then click on the validator button.

Ampersands in URLs

URLs that contain ampersands will not validate unless the ampersand is replaced by the HTML special character entity for an ampersand, ("&#38;") or ("&amp;"). In other words, replace any "&" in a URL with "&#38;".

For example, this URL:
http://booksite.com/texis/scripts/oop/click_ord/showdetail.html?sid=4892&isbn=0321430840
must be converted to:
http://booksite.com/texis/scripts/oop/click_ord/showdetail.html?sid=4892&#38;isbn=0321430840
to validate.

See:
http://htmlhelp.com/tools/validator/problems.html#amp
for more information.

How to Use the W3C’s CSS Validator

1) If your page uses any external, internal, or local CSS, you must also make sure your CSS validates (even though the HTML Validator may say your page has no HTML errors, your page may still contain CSS errors).

2) View your page (the page on the server, not the page on your disk) in a Web browser. (If the URL that you see in the browser's address window starts with "file://" instead of "http://", it means that you are viewing a page that is on your own local disk, and not a page that is on a Web server.)

3) If you have placed buttons or text links on your page that link to the W3C's CSS validator, simply click on the button and see what the validator says about the CSS used by your page.

If you do not have validator links on your page, copy your page's URL from the browser's address window. Then go to the online CSS Vaidator. In the Validate documents by URI section, enter the URL of your page (or the address of your external style sheet) into the field. Click the Check button.

4) If there are any errors, correct them, re-upload the page, and validate it again.

Note: Even if the CSS validator says that your CSS validates, always scroll down to the bottom of the report page to make sure it does not also say "No style sheet found." If the validator cannot find your style sheet, it may still say that your CSS validates (because if it can't find your style sheet, it doesn't find any errors!) at the top of the report page.

“No style sheet found” warning

Note that when you use the CSS validator to check a page that does not have a link to an external style sheet and does not contain an internal style sheet, you will get a warning that says: "No style sheet found." This is OK; it will still check any local styles. But if you get the "No style sheet found" warning and you are linking to an external style sheet, then your path to the external style sheet is incorrect.

Background color

If you use CSS to specify the color of an element, you should also use CSS to specify the element's background-color. If you use CSS to specify the background-color of an element, you should also use CSS to specify the element's color. If you specify one without the other, the validator will give you a warning.

A “Servlet has thrown exception…” error

If the CSS validator says:
Servlet has thrown exception:javax.servlet.ServletException: Timed out
this means one of two things:

1) You have something other than CSS code in your external style sheet. Usually this means you have HTML code in your style sheet. You simply need to remove the HTML code from your style sheet.

OR

2) Your style sheet is not a plain text file. Usually this means you saved your style sheet as a Word document or in RTF format (and you will see garbage characters in the file). You need to remove the garbage from the code and save as a text file.

Other error messages

If the CSS validator says your HTML needs to be validated first, but the HTML validator says everything is OK, the problem is that in your HTML you neglected to precede an attribute with a space.

For example, if in your HTML you have something like:
<img src="dog.gif"alt="dog" />
you will need to make sure each attribute is preceded by a space, as in:
<img src="dog.gif" alt="dog" />