Common Validation Problems and How to Fix Them
I get a lot of requests to check the HTML of Web sites, and the first thing I generally do when I get these requests is tell the person to validate their Web page. It's important to validate your Web pages, even if you're not planning on writing XHTML because most browsers rely on correct HTML to display the pages as you expect. Once you know your HTML is correct, you can move on to other steps in the troubleshooting path to solve other problems you might have.
But using a validator can be tricky. They give errors that you might not expect and can be hard to read an interpret. This article will help you learn to use the W3C validator as well as other (X)HTML validators.
When you've submitted a page to the validator, after a few minutes you'll get a window with results explaining what errors you have. No one gets a completely valid page the first time they try. So the most important thing to remember is that you're not a failure if your page fails validation. Web pages can work fine even if they don't validate. Validate the Web Design / HTML page if you don't believe me (but don't write to me gloating that it doesn't validate - I know).
The reason I recommend validation is to get rid of obvious problems. If you're not having any issues with how your Web pages display, then you don't need to validate unless you want to.
Missing xmlns attribute for element html. If you're writing an XHTML document (transitional or strict) the W3C validator requires that you indicate what namespace you're using. The nice thing about this error, is that if you read the whole thing, you should know exactly what to do. The error reads:
This error tells you two things: 1. The xmlns="" attribute is mandatory and 2. the root element for your XHTML document should look like: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
To fix it, just change your <html> tag to <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">.
No Character Encoding Found! This is not an error, it's a warning. You can tell because there is a yellow triangle icon beside the message, rather than a red x. You can have a valid page with this warning, but if you want to get rid of even the warning, then add a meta tag telling the server what character set you're using. The easiest is to use UTF-8 (which it defaults to). Add this tag to your <head>:
Document type does not allow element "META" here. You will see this error message when you're writing HTML 4.01 documents, but you're closing singleton tags like <meta> and <br>. In theory, this should be allowed, but the W3C validator doesn't like it. To fix it either change your doctype to XHTML or remove the final slash from singleton tags.
End tag for "SPAN" omitted, but its declaration does not permit this. Any time you see that an end tag is omitted, make sure that a) it's there and b) it's not overlapping another tag. Incorrect nesting is the most common reasons for missing end tags. Remember that valid HTML doesn't allow tags to overlap one another. If you open a tag, you must close it before opening another one. E.g.
Unknown entity This is especially common in XHTML documents. You must encode all ampersands (&), less-than (<), and greater-than (>) signs to validate. This includes inside URLs.
But using a validator can be tricky. They give errors that you might not expect and can be hard to read an interpret. This article will help you learn to use the W3C validator as well as other (X)HTML validators.
Steps to Evaluate the Validation Report
When you've submitted a page to the validator, after a few minutes you'll get a window with results explaining what errors you have. No one gets a completely valid page the first time they try. So the most important thing to remember is that you're not a failure if your page fails validation. Web pages can work fine even if they don't validate. Validate the Web Design / HTML page if you don't believe me (but don't write to me gloating that it doesn't validate - I know).
The reason I recommend validation is to get rid of obvious problems. If you're not having any issues with how your Web pages display, then you don't need to validate unless you want to.
- Fully read the text of each error.
Many validators, including the W3C validator, include a lot of information in the errors. This can be overwhelming, but if you take the time to read the error, you might find that the answer to fixing it is written right in the error itself. You can see this in one of the more common errors the W3C validator reports below.
- Fix each error in order.
HTML is read by browsers and validators sequentially, so if you try to start at the bottom of the validation list, you'll end up spending more time correcting errors than if you just start with error #1, fix it and move on. - Re-validate after every fix.
Yes, this can be tedious, but because HTML is read sequentially, a single problem at the very top of your document could be generating 20+ errors. If you fix error #1 and re-validate, you may find that you've fixed 17 other errors as well. - Go to the line number of the error and start reading up.
This may seem counter-intuitive, but because the HTML is read from top to bottom, most errors are going to be found on the exact line of the error message or before that line in the HTML. - Don't assume that the line and column numbers are accurate.
The W3C validator gives you it's best guess as to where the problem starts, but it's not always right. Use that information as a guide to show you approximately where the problem may be in your code. And as with the previous step, work up from there to find the problem. - Don't worry so much about "warnings".
The W3C validator will sometimes give warnings when it isn't sure about something in your code. But you can write a fully valid page that has a warning. The warnings are just that - warnings that some browsers or user agents might have trouble with the content you're submitting.
Some of the Common W3C Validator Reports and What to Do About Them
Missing xmlns attribute for element html. If you're writing an XHTML document (transitional or strict) the W3C validator requires that you indicate what namespace you're using. The nice thing about this error, is that if you read the whole thing, you should know exactly what to do. The error reads:
Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">This error tells you two things: 1. The xmlns="" attribute is mandatory and 2. the root element for your XHTML document should look like: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
To fix it, just change your <html> tag to <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">.
No Character Encoding Found! This is not an error, it's a warning. You can tell because there is a yellow triangle icon beside the message, rather than a red x. You can have a valid page with this warning, but if you want to get rid of even the warning, then add a meta tag telling the server what character set you're using. The easiest is to use UTF-8 (which it defaults to). Add this tag to your <head>:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />Document type does not allow element "META" here. You will see this error message when you're writing HTML 4.01 documents, but you're closing singleton tags like <meta> and <br>. In theory, this should be allowed, but the W3C validator doesn't like it. To fix it either change your doctype to XHTML or remove the final slash from singleton tags.
End tag for "SPAN" omitted, but its declaration does not permit this. Any time you see that an end tag is omitted, make sure that a) it's there and b) it's not overlapping another tag. Incorrect nesting is the most common reasons for missing end tags. Remember that valid HTML doesn't allow tags to overlap one another. If you open a tag, you must close it before opening another one. E.g.
<p><span>text</p></span> - WRONG <p><span>text</span></p> - RIGHTUnknown entity This is especially common in XHTML documents. You must encode all ampersands (&), less-than (<), and greater-than (>) signs to validate. This includes inside URLs.
Source...