Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

W3C Validation Service

The Joys Validating Your Own Code

Note: It is strongly recommended to print this tutorial so you can easily work with the W3C report as it renders online.

One of the wonderful features of the World Wide Consortium (W3C) is that you can use the Markup Validation Service on their web site to examine your xhtml coding for errors. And it is absolutely FREE!

Go to the W3C Validation Service at http://validator.w3.org/.

Keep in mind, the language that the validation service generates can be intimidating and daunting, but we are going to work through it together, so don’t be too worried. With more practice, you will eventually become accustomed to how the validation service works.

Validation Notes:

The W3C reads each line of code, then renders a report.
Sometimes the validation output report will state an error, but the actual error could be located in a different place. Look at the coding before or after the error.
It is advisable to save your file after every correction, then re-validate. Sometimes, fixing one error will fix other errors.
If you are using Internet Explorer 6 (with older versions of Win XP SP2), you could experience a problem with the validation. Please read the W3c article that explains the problem and offers a solution. Most should not experience a problem, since Microsoft released a fix in February 2005.

When you access the W3C Validation Service main page, you will notice there are three different ways to validate your web files.

Validate By URL

validate by URL

If you need to validate a file that has been uploaded to your web account/host, then paste the URL into the address box. Make sure to include the http:// or it will not work properly.

Hit the Check button and away she gooooes!

What’s An URL?

You may or may not have heard of URL before. It stands for Uniform Resource Locator, and is just a fancy name for web file address. It could be for an xhtml file, graphic file, Macromedia Flash file, audio file, etc. Anything viewable online has its own specific URL.

Validate by File Upload

validate by upload

(Depending on the browser you are using, you might see a slightly different display.)

To validate a web file on your hard drive, click the "Browse" or "Choose File" button and browse to the location of the file. This will temporarily upload your file to the W3C servers so the service can validate the code.

Once the file path is defined, hit the "Check" button and wait for the report.

Validate by Code Input

validate by input

Copy and paste the xhtml code from a web file into the text box, then hit the "Check" button. Make sure that you paste the code completely, or it will not validate properly.

Extended Interface

For all three validation choices, there is a link for Extended Interface. It adds a few more options to your validation choice. Below are some you may be interested in:

Encoding (charset) and Doctype can be changed to something different than what is declared on your web file. This is a great way to check to see if your transitional files will validate strict, or vice verse.
Show Source - If your file is erroneous, the source code will display along with links from each error to the line of code in question. This allows you to easily go to the line of code that W3C says is invalid.
Verbose Output - Adds more descriptive explanations for each error.

Practice Validation File

It normal to initially feel intimidated by the W3C validation service; it can generate some tricky errors that you might not comprehend if you are a newbie to web coding.

Let’s figure it out together. First, download the practice validation zip
file and unzip/save the file validator1.html into the folder where your web files are saved.

Launch your text editor, and open the validator1.html file. Alternatively, you can right-click on the file directly in Windows Explorer or Macintosh Finder and choose open with.

Note: To open a previously saved file in Notepad, you must first start Notepad, then choose File>Open. Select "All Files" from the list of Files of Type. Browse to the saved file.

For this project, it will be easiest to use the Upload option to validate the practice file, and let’s try the Extended Interface, either by clicking the link or going directly to http://validator.w3.org/file-upload.html.

Check the box next to Show Source and Verbose Output. Leave all other settings at default.
Click the "Browse" or "Choose File" button (depending on which browser you are using) and navigate to the validator1.html file saved on your hard drive.
Hit the "Validate" button and watch the validator go to work.

Working Through the Errors

Once W3C finishes validating your file, you will either see results that Pass or Fail your file. If your file passes the validation process, it will be a happy green result. If your file fails, it will display in red.

You should see similar results as the screen shot below.

validation results

A big red bar states that the file failed. Since we know the validation1.html file has errors, this is no surprise.

failed validation

The above screen shot should be similar to what you have displayed in your browser as well. (There is a chance that the line numbers could be slightly off.)

Take a close look at the first three errors. Notice how the same line number is referenced in each? It is referring to the same error.

The first error is telling you that there is no ending tag for the <em> tag.
Next, it shows where the staring <em> tag is located.
Finally, it states that the closing </em> tag doesn’t have an opening <em>

Optionally, click the "8" link located next to the 1st error and it will zoom down to line 8 in the source code located below the errors.

Hmm, yes, there is an opening <em> and a closing </em> tag…but hmm, it doesn’t look to be nested properly.

<h1>Let's Practice With the <em>Validator</h1></em>

The golden rule of (X)HTML coding is first tag opened, last tag closed.

Any tag(s) nested in another tag must be closed before the first tag is closed. As you can see, the <em> tag is nested in the <h1> tag, but it is closed outside the closing </h1> tag. It has to be closed before the </h1>.

In your text editor, correct the placement of the </em> tag on line 8 in the validation1.html file and save the edited file.

<h1>Let's Practice With the <em>Validator</em></h1>

Always save and re-validate your file after any corrections have been made, to get a fresh validation report. As I stated previously, many times more than one error will be fixed by just one coding correction.

Use your browser’s Back button to go back to the Validation Service page. If the path to your file is not still displayed in the text box, click the Browse button again, choose the file.

Make sure the Show Source and Verbose Output settings are still checked and click the Validate button.

Good news! The errors pertaining to line 8 should have disappeared. If not, go back and make sure you have made the corrections and saved the file.

So, what errors were generated this time?

Line 10, column 104: end tag for element "string" which is not open

hmm, <string>? Click the line 10 link next to the error to view the line of code.

On line 10, it looks like there is a misspelling of the closing </strong> tag — and that is an easy fix, right? In your text editor, correct the error, then save.

If so, let's hope we can fix it so it <strong>conforms</strong>

Use your browser’s Back button to go back to the Validation Service main page to revalidate the newly corrected file.

We must be getting closer, as the page of errors is getting smaller. Onward we go!

Line 10, column 164: end tag for "em" omitted

Hmm, does this error look familiar to you? Seems we had the same sort of problem with the first error we fixed.

Click the Line 10 link next to the error to view that specific line in the source code.

Just as the first error, the </em> tag is not nested properly. Remember that golden rule? first tag opened, last tag closed. Well, that </em> tag needs to be moved before the </p> tag.

<p>Does this first paragraph have errors? If so, let's hope we can fix it so it <strong>conforms</strong> to the W3C Web site's specifications and <em>standards.</em></p>

<hr />

<p>Good luck to all of us on our journey to learn proper XHTML coding.</p>

Correct this error in the validator1.html file in your text editor, save and re-validate.

Yahoo! It looks like only one more error remaining! Hmm, but we might need our ‘thinking caps’ for this one.

Line 12, column 75: document type does not allow element "hr" here

The report is telling us that the <hr /> tag is not allowed where it is located.

Click the Line 12 link next to the error to view the line of code.

Where is that <hr /> tag located? Nested in the <p> tag? Remember that the <hr /> tag stands on its own. It cannot be nested in a <p>, <h1>, or an inline tag.

So, that means that the <hr /> tag must be moved so it is not nested in the </p> tag. How about moving it so it is in between the two paragraphs?

Correct the file in your text editor, save the file, and then re-validate the document one more time. Fingers crossed!

If all goes well, you will see the green bar stating that "This Page Is Valid XHTML 1.0 Transitional!" and a Validation Icon will be displayed on the Results page stating your page is fully compliant to the W3C standards of XHTML.

One your page validates, you have the option to display the validation icon on your web file.

If you want to display the icon, copy the (x)html code from the results page and paste it into your file. Make sure to paste the code somewhere in between the <body> and </body> tags. This will display the Validation Icon on your error-free page.

Make sure to copy the logo/icon coding exactly! If you are in doubt, validate your page again after the logo coding has been added.

Will It Validate Strict?

Are you curious to see if the test validation file will validate as "strict" xhtml?

Back on the Validation Service main page, from the Doctype pull-down menu, instead of "detect automatically", choose "XHTML 1.0 Strict".

Click the "revalidate" button.

A message will display stating that Doctype Override is in Effect and your file is "temporarily valid for xhtml strict". This is just a reminder that if you want your file to be truly xhtml strict, the Doctype for xhtml strict will need to be inserted instead of the transitional one.

validating as strict

Validate Your Own xhtml File

Now it’s time to validate your own web file. Correct any errors the validation service might find.

Validation Tips:

Make sure all tags are nested properly. Remember first opened, last closed.
Do not nest block-level tags such as <p> or <hx> inside an inline tag such as <strong> or <em>
Do not nest a <p> tag in a heading <hx> tag, and vice verse. A heading is a heading and a paragraph is a paragraph. They do not belong together.
Do all opening tags have a closing tag?
If you receive an error on a missing closing tag for the <hr> or <br> tag, do not add an </hr> or </br> tag to fix the error. Both these tags are empty tags, so they require a [space] / as in <hr /> and <br />

FAQ

I downloaded the practice validator zip file, but when I opened it in Notepad, it was all goobly goop.

ANSWER: Sounds like the file was opened in Notepad before it was unzipped. Unzip the file first, then open the actual .html file in Notepad.

My browser won’t display the W3C icon on my page. I know the code is there, but why won’t it show?

ANSWER: Since the W3C icon is actually saved externally on a web site outside your own site, your firewall might be protecting you from viewing the icon. Make any adjustments to your firewall carefully.

When the validator shows an error on a particular line, how can I find the specific numbered line in my text editor?

ANSWER: Most text editors will display line numbers.

In Notepad (Windows) uncheck Word Wrap first, then choose Edit>Go To.
In TextEdit (Mac) I couldn’t find a way to display line numbers. Textpad is a good editor, but I suggest using a different editor that offers more features, such as TextWrangler or TacoHTML Edit.

What do you want to learn next? « Comments Linking the Web »

3 Comments

Comment by Llewelyn Tudor on May 6th, 2008

Hi Debbie
For some reason I can’t open Practice Validation Zip File. I can’t get it to unzip and when I try to open it I get a Program called unwise.exe trying to open it and which it cannot do….
Do you have any answers:-(? or can you send the file to me in another format?
Best regards
Llew
Comment by Llewelyn Tudor on May 6th, 2008

Hi Debbie
I’ve just validated my son’s business web page and there were 9 errors. all the errors were id=”hm errors, eg div id=”hm_productsStripe”> because it didn’t show my example hence second attempt:-)
why is this?
Best regards
llew
Comment by debbie T on May 6th, 2008

llew, it sounds like you do not have an unzipping program on your computer.

You can try winzip . I don’t know what Operating System you are on, but I thought Win XP offered a feature to automatically un-zip .zip files.

Sorry, I don’t know why your son’s page shows these errors.

If you would like to contact me directly, I do hourly consulting for business web sites, if that is something your son would like to do.
Good luck!

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.