How to identify errors in your website
Building a website is a very precise process. You only have to forget a single character or put it in the wrong place, and your page already doesn’t look the way you wanted it to. That’s why it’s always wise to have your pages checked by a so-called validator before you put them online.
A website validator is a small program that checks your code and makes sure everything is okay. If he finds errors, he will indicate exactly where they are, so that you can easily trace them and correct them.
I always use the W3C validator, the website check of the World Wide Web consortium. It offers three ways to check your website for errors: you can enter a website address (validated by uri), upload an html file (validated by file upload), or enter your html code directly in a dedicated box (validated by direct input). So even before you put your pages online, you can check that everything is okay.
The validation by direct input method is the easiest one for me. The program is very accurate, and also finds errors in pieces of code that you can’t change. For example, if you have a Facebook like-button on your page, the code will always give you an error message. Because you can’t change anything else about that code, I usually remove all codes that aren’t my own, and I paste what’s left in the appropriate box in validated by direct input method.
When I did that on this page and clicked on the check-button, I got to see the following:
So I had two warnings, and there appeared to be one error in my page. The first warning had to do with the fact that this page was written in html5. The validator’s html5 checker is still in an experimental stage, so with this warning they’ll have a little more time.
The second warning is not serious either: because I used the validation by direct input method, the code I paste in the input box is converted into the character set utf-8. That is fine in this case, because my page was also stored in utf-8. (In the article ‘How to encode special characters in html’ you can read more about character sets.)
But apart from these two warnings I also had an error message, and it was an error that I had completely overlooked myself. There appeared to be one div-tag too many on the page. Despite that mistake, my page still looked good in the different browsers, because it was the very last tag I had put on the page (except for the closing tags for the body- and html-element then).
The validator also tells you exactly where to find your errors; in my case there was an error on line 142. If you can’t find that spot immediately, paste the code you pasted into the validator’s input box exactly like that into an empty document in your html editor. Then you look up the mentioned line, and you will see which correction you need to make. When I corrected this mistake, and had the code checked again, I got to see this:
By the way, don’t be alarmed if you get a lot of error messages; not all of them are equally serious. And it doesn’t mean that your website wouldn’t look good in the different browsers. But if that’s not the case, and you can’t find where the problem is, then this validator is an easy way to check the pages of your website and to find out the ‘culprit’.
In addition to your web pages, you can also have your stylesheet(s) checked. The World Wide Web consortium offers a CSS Validation Service for this purpose. The principle is the same: you can enter your style sheet again in three ways (via uri, file uploading, or direct input).