Reading: Validation

You may think that if your web page shows up in the browser, the code is correct. Not so. Browser software is designed to attempt to correct coding errors. Incorrect code may appear the way you intended in one browser, may appear odd in another browser, and may not appear at all in a third browser.

There’s an easy way to find out if your code is correct. Validate! The World Wide Web Consortium offers a nifty validator. It’s at http://validator.w3.org/. Now, there’s one little catch. You have to tell the validator what version of html you’re using, so it knows what to validate. That’s easy, just add a DOCTYPE at the top of your web page. You also have to add language information to the html tag, as well as a meta tag which indicates the character set. Well, all this technical stuff is beyond me, so I just copy and paste.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>The title goes here</title>
   <meta charset=”utf-8″>
</head>

<body>

<h1>This is a level one heading</h1>

<p>My first lovely paragraph. Wow. This is fun.</p>

<p>My second lovely paragraph. We can make paragraphs forever.</p>

<h2>This is a level two heading</h2>

<p>Thi is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p>

</body>

</html>

Do not try to type this. Just copy and paste it at the top of the web page you’re making in Notepad. Be sure to remove the old <html> tag that you had, so you don’t have two html tags. Don’t forget to save the file again.

The DOCTYPE tells the validator what version of HTML you are using. There are several different versions of html. We’re learning HTML5.

Now you’re ready to validate. Here’s the link again: http://validator.w3.org/. When you get to the W3C validation page, click the tab that says “Validate by File Upload.” Browse to the correct file, then click the “Check” button.

If the code validates, you’ll see “This document was successfully checked as HTML5!” on a green background. Green is good. If the code does not validate, you’ll see ” Error found while checking this document as HTML5! ” on a red background. Red is bad. If your code does not validate, the validator will tell you what is wrong. Read the feedback from the validator, change your code in Notepad, save, then validate again.

The validator generates error messages that are usually pretty helpful, but because of the way it parses documents, occasionally its feedback is cryptic. You’ll get used to this, but here are some tips to help you get started:

  • Validation errors cascade. Don’t get discouraged if you see you have 36 errors in your document! Fix the first one, then validate again. This will often fix many of the following errors, especially those that pertain to the structure of the document.
  • You can have only one html statement per document. If you copy and paste <html lang=”en”> into your document, take out the old <html>.
  • You can only have one body tag in your document. Later, when we get to styling the body tag, be sure you don’t have two body tags.
  • The validator may object to code which is correct, but is in the wrong location. For example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>The title goes here</title>
<meta charset=”utf-8″>
</head>

<body>

<h1>This is a level one heading</h1>

<p>This is BAD CODE EXAMPLE. Don’t copy it</p>

<p>My second lovely paragraph. </p>

</body>

<h2>This is a level two heading</h2>

<p>Thi is my third paragraph. </p>

</html>

The above code generates the following validation error:

Error Line 19, Column 4: Stray start tag h2.

<h2>This is a level two heading</h2>

There is nothing wrong with the code for the h2 statement; the validator is objecting to its location. The previous statement, the </body> statement, is in the wrong place. The closing body tag must come after all statements and right before the </html> tag.