W3C validation isn't very forgiving at times, but it allows you to see errors that are generated by your markup. Lots of errors and warnings thrown by the validator are a good indicator that your XHTML isn't in very good shape, and might not look consistent across different browsers. Here are 10 sneaky validation problems that trip developers up, and how to avoid them.
10 Reasons Why Your Code Won’t Validate (and How to Fix it)
Mar 2nd in Web Roundups by Glen Stansberry
Before we get started, here are a few good practices to remember when using the W3C validator.
- Don't sweat the warnings - If the validator says that you have 12 errors and 83 warnings, just worry about the errors for now.
- Knock off errors one at a time - Work your way straight down the list, top to bottom, knocking off errors one at a time. The HTML is read by the browsers from top to bottom, so the errors show the same way.
- Re-validate the code after each fix - Oftentimes one error can be causing multiple errors down the page. Alternately, some "fixes" can cause more errors, if done improperly. Re-validating after each attempt can ensure that you're completely fixing the problem.
With those basic tips out of the way, let's have a look at some of the reasons why your markup isn't validating.
1. An unclosed div tag
One of the most common reasons why layouts don't validate. It never ceases to amaze how often this is the culprit for a funky layout. Unclosed div tags are one of the most common layout mistakes, and also one of the hardest to diagnose. The validator doesn't always point to the proper unclosed div tag, so it's not always easy to find the needle in the haystack.
2. A rogue embed tag
In the early 90's, browsers like Microsoft and Netscape started recognizing unique font declarations which were never standardized. Unfortunately this means that the W3C validator still doesn't recognize some important HTML tags like 'embed', even though they're widely used to this day. If you're really looking to get that strict DOCTYPE validation, you'll have to ditch the embed.
If you really want to have valid markup and embedded media, try using the Flash Satay method.
3. Improper DOCTYPE declaration
A frequent mistake is either not declaring a DOCTYPE, or declaring the wrong DOCTYPE at the head of the document. As a general rule of thumb, Strict DOCTYPE is the highest validation to shoot for. Strict validation means that you are webpages have the best shot at displaying properly across all browsers. Here's what a Strict declaration looks like:
4. Trailing slash
If your site isn't properly validating, then there is a good chance that the reason is a missing trailing slash somewhere in your code. It's very easy to overlook something like a trailing slash, especially in elements like image tags. For example:
This won't validate against a strict DOCTYPE. Add a '/' before the img tag ends in every case to solve the issue.
5. Align
You'll be fine using the tag "align" if your DOCTYPE is set to Transitional, but if you've taken the higher road and chosen a Strict validation, you'll see errors. Align is another depreciated tag that shouldn't be used anymore in markup. Instead of align, try using float or text-align to shift the element.
6. JavaScript
If you've declared a Strict DOCTYPE, you'll need to wrap CDATA tags around your JavaScript code. This aspect of validation has tripped up many a developer, as sites tend to use in-line JavaScript for things like ads and tracking scripts. If you have to include JavaScript, just add these tags before and after:
7. Images always need 'alt' attributes
If you haven't noticed by now, images are a major potential stumbling block for good validation. Aside from trailing slashes, they also require alt tags that describe images, i.e. alt="Scary vampire picture".
Search engines are also relying on this alt tag to help identify images on the page, so it's good practice to add the alt tags anyway.
8. Unknown entities
Entities are another small pitfall that tend to stand in the way of validation. Instead of using things like the "&" symbol, it's a good idea to use properly encoded characters. Here's an entire list of properly encoded character entities for use in XHTML markup.
9. Bad nesting
Nesting is when you have elements inside of elements, like so:
Sweet!
It's quite easy to get mixed up, and mix is the order of nested elements. For example, starting the strong tag before the div tag, but closing the div tag first. This may not alter the look of the layout, but it will definitely keep your markup from validating.
10. No 'title' tag
While it may seem like an obvious problem, many developers (including myself), still leave off a 'title' tag in the 'head' section every now and again. If you see the error "missing a required sub-element of HEAD", then you know that you're missing a title tag.
If you found this post useful, please vote for it on Digg.Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Nicholas March 2nd
What a great article. One thing that I would like to point out is the purchase of Themes and checking validation before purchase. I have ran into a couple that didn’t validate after purchase. What a NIGHTMARE!!! So now I have a standard practice to use the LIVE DEMO feature (ThemeForest) and then use that URL in the http://validator.w3.org/ website.
This has saved my butt more than once. Thank you again for sharing your insight.
( )kiziel March 3rd
Remember most themes are html protected with javascript, and therefore doesnt validate properly on preview page.
( )Andrew Pryde March 3rd
Surely html cannot be protected with javascript. Anyone who knows enough to seal the code / images knows enough to turn javascript off do they not?
@Prydie
kiziel March 4th
No, as the whole html code can be hidden with javascript, turning javascipt off will result a clean page.
TeamTutorials March 9th
All code can be de obfusicated
Wordpress Themes March 2nd
Nice and simple post, I like it. I’ve gotten validation down I’m glad to say. I love how one fix usually fixes everything else.
( )Yash March 2nd
This just refreshes the idea that you need to validate and continually check your code when you use it, so that your not bombarded with a bunch of errors when you’re done. I also like Jeffrey’s method of commenting the closed divs. .so you don’t get mixed up (happens to me a lot
).
( )David Singer March 2nd
The HTML Validator plugin for Firefox is a life saver for validating code… Speaking of valid code there are 4 errors on this page.
( )Andrew Pryde March 3rd
The irony is striking is it not.
@Prydie
( )Chris March 2nd
“Strict validation means that you are webpages have the best shot at displaying properly across all browsers.”
???
( )Synook March 2nd
“If your site isn’t properly validating, then there is a good chance that the reason is a missing trailing slash somewhere in your code.”
That only applies to XML-based markup (not all “strict DOCTYPEs”). Remember, in SGML equals > which is definitely not correct!
@Chris – if you use a Strict DOCTYPE browsers are more likely to display your page in a consistent manner, as they will go into standards-compliance mode (some transitional DTDs will trigger that mode too, but Strict is just better anyway
( )Dan March 3rd
In time I think coding all your pages 1.0 strict will pay off, but as it is right now is doesn’t seem to be a HUGE factor in cross browser compatibility.
( )Nathan Chancellor March 2nd
Thanks for the tips.
( )weblizzer March 2nd
lol, the 4 error on this page is not with the html it’s because of the iframes… anyway html validator saves a lot to check your html codes
( )Timothy March 2nd
My sites tend to have a lot of warnings, and often errors, since I leave form actions blank, anchor hrefs empty and whatnot. Since I tend to use MooTools to add events to elements like these.
( )Miles Johnson March 2nd
All valid points. Thats what firebug and html tidy are for :]
Also id like to point out, that HTML 5 should be used over XHTML. http://www.webdevout.net/articles/beware-of-xhtml
( )Evan Riley March 3rd
I would love to hear why you think HTML5 should be used over XHTML.
I personally don’t see why you would want to use HTML5 over .XHTML
( )Adam Griffiths March 3rd
It’s because browsers don’t ever show xHTML pages as application/xhtml+xml, just normal text/html. Web servers have no way of properly sending the application/xhtml+xml content type, so browsers display the xHTML as improper HTML.
That and all the web browser developers are working hard on HTML5 and they say that HTML5 is the future of the web.
Also, xHTML2 isn’t compatible with xHTML1 – which seems dumb anyway but even more dumb since it’s useless.
The only reason I used xHTML on my blog was because of a few errors I had, which I found out how to fix I can move back to HTML.
Synook March 3rd
Between XHTML 2 and HTML 5, I think that it will be just personal preference (and maybe the content of your site) that matters. However, as Adam pointed out there is no point in using XHTML 1 at the moment as browsers don’t treat it differently. Between XHTML 1.0 and HTML 5, HTML 5 is obviously the better language. XHTML 1.0 is basically just HTML 4 in XML syntax!
Ryan March 3rd
You should be using HTML 4.01, not 5 at the moment. You’re right though, there is no reason you should be using XHTML 1.0 right now.
( )Miles Johnson March 3rd
Yeah I meant to say HTML 4, but the point stands with HTML 5 also :p
Nick March 2nd
I remember the first time I tried to validate my code…I think there was like, 500 errors, haha.
( )Bryan P. March 2nd
I think validation is a good tool. But I dont always put alot of stock into it. I usually check to make sure my code looks correct in IE6 and IE8 and then I push the update up.
The validation is perfect to find the nity grity issues with the code.
( )Dan Beeston March 2nd
I was under the impression that alt tags shouldn’t be used to describe illustrations that are just there to break up the content visually. instead leave them empty alt=”". But if you’ve got text in the image make sure you duplicate the text in the alt tag.
( )Ryan March 3rd
I second that. ALWAYS include the alt attribute but if the image is simply decorational and not informational, then don’t put anything in the quotes. Leaving out the alt text will cause many browsers to show the image’s filename on hover.
( )Bri March 6th
I agree with that. I was always told alt info is only needed on images that have text or are important to the page information. Decoration needs no alt
Cool tutorial though
insic March 2nd
Nice Post. I validate my clients site but not my personal site. I need to work on it.
( )Chumpy March 4th
Prft and you call yourself a web developer when your contact page isn’t even validated. Shame.
( )Sirwan March 2nd
Hey, thanks for a cool tutorial.
But the article picture sucks, probably the worst green tick iv ever seen.
( )Sirwan March 3rd
lol wut?!
( )Saro March 3rd
Yea, you’re right xD
kiziel March 3rd
Agree with that
( )Christopher Francis O'Donnell March 2nd
Good article, but isn’t XHTML … um … dead? HTML5 is sort of taking over.
( )Dan March 3rd
…where did you here that? That’s false. XHTML 1.0 Strict ftw.
( )Ryan March 3rd
Yeah, HTML5 is probably going to be huge eventually, but browser support isn’t up to snuff yet. Stick with XHTML for now.
( )Adam Griffiths March 3rd
Browser support for xHTML isn’t up to “snuff” either. It gets interpreted as tag soup HTML, since isn’t valid HTML, it’s tag soup.
Sure xHTML promotes good formatting of your code, no caps, ending all tags etc. But if it doesn’t get parsed as xHTML, what’s the point?
Ethan:T March 5th
What is this about HTML5?
( )James March 3rd
@Christopher, HTML5 probably won’t be W3C recommended for at least a decade. For now, it’s XHTML 1.0, or HTML4.01 …
( )Yoosuf March 3rd
mostly evry one misses one of thease, nice tips
( )Shane March 3rd
Step 1: Write markup
Step 2: Validate at http://validator.w3.org/.
The validator will tell you what’s wrong with your code. Fix it, learn from it.
Isn’t it that simple?
( )Synook March 3rd
Not always!
( )http://www.aspektas.com/blog/the-validator-isnt-the-end
InXone March 3rd
A good editor (like e (http://www.e-texteditor.com/index.html) for windows or textmate (http://www.textmate.com/index.html) ) will allways help you with that.
Since I edit my code with e almost every problem mentioned above doesn’t happen any more and I can additionally run the validation automatically every time the code is saved.
But it’s always good to know what you (and your editor) are doing so thanx for the nice list of common validation problems…
( )Lamin Barrow March 3rd
I use the Firefox add-on HTML Validator https://addons.mozilla.org/en-US/firefox/addon/249 … that way i can always tell when something in my or another websites markup is not right.
This tool has proven to be quite handy in several occasions and i will recommend it to anyone who’d like to avoid this pitfalls.
( )name March 3rd
Is #3 a joke? “Here’s what it looks like” and then nothing,…?
( )Dave Redfern March 3rd
the biggest for me is & in urls. for example daveredfern.com/index.php?message=hello&message2=byebye
If you like to this it will fail validation because it needs to be &
Always get me, especially when using cms and content controlled by clients.
( )Adamik Alan March 3rd
Hi, I’m french and my english is kind of unsure
( )But in the “bad nesting” point, you said :
“For example, starting the strong tag before the div tag, but closing the div tag first. ”
Actually, if the div tab is opened after the strong tab, it must be closed first
Alex March 3rd
Thank you for the great post. I still believe the best validation methods are still manual ones, using FireBug, IE Dev toolbar and other cool addons (some of them mentioned on http://www.whatwasithinking.co.uk/2008/12/19/firefox-extensions-for-usability-accessibility-and-seo-experts/) are always a winner to see what happened and where you need to brush up still
( )Shane March 3rd
@Glen – you can still embed stuff using the object tag:
http://www.alistapart.com/articles/byebyeembed/
@Jeffrey – you’re no doubt aware of the funny formatting of the comments at the moment
( )Jeffrey Way March 3rd
Hey guys. We’re updating our comments to a new threaded system. The weird formatting issues should be fixed soon!
( )chris March 3rd
Thanks dude. Very useful
( )Jesse Storimer March 3rd
Does anyone know how page validation affects search engine results?
I have heard, but not confirmed, that your ranking on Yahoo will increase just by having HTML that properly validates?
( )Julian Young March 3rd
Hey Jesse, I’m not so sure that valid code affects rankings however the general consensus is that strict validated code will ensure no issues are met when your site is spidered and indexed. Having issues with your code validation ‘could’ lead to worse seo.
( )kiziel March 3rd
Of course it does effects on seo. Valid code is one of the basic seo tips.
( )Ryan March 3rd
No, page validation does not affect your ranking! It could certainly help the search engines understand your site better though. And valid code is NOT a basic seo tip, lol.
Chris March 3rd
HTML 5 is absolutely not taking over. It’s really not even relevant at this point. That’s one of the most ridiculous things I’ve ever seen on a NETTUTS comment board.
Anyone with any experience in the web knows that web ‘upgrades’ such as HTML5, CSS3, etc. take lots and lots of time. It will be years and years before people are regularly working with HTML5.
( )Miles Johnson March 3rd
And what, we should be using XHTML 1.0? Thats a bigger laugh.
( )Daniel Apt March 3rd
@ Dan Beeston
I use alt tags to describe what is seen, like so people who are blind are can’t see well, are still able to know what that image is about.
( )Furley March 3rd
ive been teaching my students the flash satay mtheod for a while now. Glad to see it get a little coverage here.
( )Aniket Arora March 3rd
The article is very nice and straight. I really liked it.
( )When I was reading it, everything that i did study while reading a book meant for HTML and CSS was knocking my mind again. The book was from Head First Series.
Nathan Ledet March 3rd
Did you read your article before you submitted it? Good info – but lots of stupid typos.
( )Paul Morales March 3rd
Thanks, Great Tips. I need to start adding alt to image tags
.
( )Bjorn March 3rd
Rules to live by. Thank you!
( )John Dangerous March 3rd
Sweet
( )Meshach March 3rd
Pretty good article.
( )Daniel March 3rd
“If you’ve declared a Strict DOCTYPE, you’ll need to wrap CDATA tags around your JavaScript code.”
This only applies in a XHTML context though right?
( )BORABORA March 3rd
Nice post!
( )Sadly this is a very underestimated topic in webdesign, even under professionals.
Best wishes
BORABORA
Rae March 3rd
#4 and #7 aren’t entirely correct if you’re using HTML and not XHTML. I know, I know, we should all be using XHTML, but it’s an important distinction to make.
#4: In HTML, adding those trailing slashes will cause warnings because HTML *doesn’t* require them.
#7: HTML doesn’t know what CDATA is, only XHTML does, so if you’re using HTML doctypes, you should still be surrounding your JS with regular ole’ HTML comments.
( )Dave McFarland March 3rd
I wonder about the JavaScript example (#6). The W3C validator didn’t spit up any errors when I tested both XHTML 1.0 Strict and XHTML 1.1 pages which include script and JS code both inside the head and body of a page, but without any CDATA section.
( )James March 3rd
You only have to wrap a script in a CDATA declaration if your script contains anything which could be mistook for an XML element. In other words, if your JavaScript code contains either the ‘<’ or ‘>’ characters you should declare it as CDATA, otherwise don’t bother.
( )crysfel March 3rd
Thanks for the tips!!
( )Paris Vega March 3rd
The CDATA bug got me for a long time. Thanks for sharing the knowledge.
( )Patrick H. Lauke March 3rd
In 2, “unique font declarations” – you probably meant “unique element declarations”
3: the doctype isn’t showing
4: the “trailing slash” is only an issue in XHTML, where the “one-off” type elements (like IMG and BR, which don’t have an matching set of opening/closing tags) need to be self-closing.
5: it’s not a tag, it’s an attribute.
6: CDATA isn’t strictly a tag…not quite sure what the thing is actually called, but usually you’d say that scripts need to be in a CDATA marked section or something.
7: the heading gets it right, they’re attributes…but then proceeds to call them tags again. There’s no such thing as “alt tags”.
8: worth mentioning that, particularly with ampersands, entities also need to be encoded if they appear in things like href attributes of a link.
10: may be worth referring to it as the title *element* (as we’re talking about the opening tag, the title, and the closing tag).
( )Alex March 3rd
Hi,
This blog is very interesting for all web developers; is simple, short and nice. Excellent job!
Let me tell you my personal appreciations and suggestions about this.
First, a common DOCTYPE declaration syntax is
I learn about this at: http://www.aggiorno.com/fundamentals-what-doctypes.aspx
Second, the “Trailing slash” is a common HTML structural problem, for example, depending on the tag, a separate tag or self-closing tag can be used.
Another topic related with HTML Structure Errors is the invalid tag structure, for example a simple case between and tags when the title isn’t inside the head.
The HTML Structure Errors (http://www.aggiorno.com/what-is-aggiorno-fix-tag-structure.aspx) are the main reasons why many of the web pages don’t pass the validation process.
I think the problem is that W3C Validation service doesn’t make any corrections, only check and communicate results.
And yes, after that you have to check manually page by page, finding and fixing each error or warning.
I‘ve been using a cool Web tool called Aggiorno (http://www.aggiorno.com) to fix all those problems quicker, the best part; you don’t have to it manually.
Thanks for all!
( )Wade Jackman March 3rd
now if only CSS 3.0 coding would stop throwing validation errors
( )Dan March 3rd
You can change it to read it as css 3
( )Braden Keith March 3rd
3 Is not showing properly for me. It does not show what strict doctype looks like. What does strict doctype look like?!? haha lol
( )Jon Friesen March 3rd
I just want to point out that you said Align was a “depreciated” tag. What you mean is “deprecated”.
( )Ariyo March 3rd
Thanks for the article. I find myself going through my codes and fixing them and find out that the errors are coming from the plugins that I have used in wordpress. I would love to see a tutorial on how to go about fixing those errors. Thanks again.
( )aravind March 3rd
agree.. validation is essential.. but still many of the RTE’s coming with various Content Management Systems doesn’t follow any standards. It makes almost all the CMS powered websites I developed non-standard!
( )thetooth March 4th
i still find it amazing how many people don’t have this basic nolage and how these people manage to ever make web pages
( )whatever July 7th
i find it amazing you actually typed “nolage”
( )Snookerman March 4th
4. Trailing slash – you only need that if you are using XHTML and you would only use XHTML if you don’t want to support IE. If you want IE users to be able to see your site, you would use HTML and then you wouldn’t need any trailing slashes.
9. Bad nesting – the “faulty” example you used is actually not bad nesting at all.
Also, there are many other more important issues that you didn’t bring up..
( )Martyn March 4th
The one that always gets me is an empty alt tag, but I tend to always validate throughout the coding process.
( )Alex March 4th
Yes, but how to Google, MSN, Yahoo or other search engine will know what is in those pictures? What is its mean? Remember that these engines are your main customers, and are blind! What happens if you put text in an image? Search engines can not index, that is the true value of the alt, not just pass a validator
( )See more http://www.aggiorno.com/what-is-aggiorno-add-alt-text-image.aspx
Kevin March 4th
I had the doctype problem and didn’t realize what was wrong for 6 months before. I must have erased it accidentally out of my index page (which would not center align), but all other page in the site had it.
It was by chance that I discovered it one day, but I vowed to never make that mistake again. Luckily for me none of the site’s users ever noticed.
Great article!
( )iPad March 5th
Thanks! great tut!
( )christian March 5th
The websites are implementing increasingly complex libraries that make it difficult to have a validated code. Thanks for the recommendations.
( )Jennie Lyon March 8th
Hi,
( )My blog http://www.sweetgreens.blogspot.com’s feed won’t validate? When I click on the feed button on ie7.0 I get a DTD error? Any ideas?
Adam March 10th
I tend to validate against XHTML 1.0 transitional mostly, as I like to be able to use target=”_blank” for some links (pdfs, external links etc).
Don’t really want to have to use a bulky JavaScript option to get around it.
Shame 1.0 Strict doesn’t support this.
( )danreb March 10th
Very nice and interesting articles
( )Thanks.
Blacksnipe March 15th
If you have a Mac, and you want to get rid of the entities mistake, simply download the Dashboard Widget from the Apple website. Here’s the link: http://www.apple.com/downloads/dashboard/developer/htmlentitycharacterlookup.html
( )Dave April 2nd
Or maybe your code doesn’t validate because you don’t know how to write it? Gah. I hate stupid coders. Web coding is NOT THAT F*CKING DIFFICULT. I rebuilt an entire website in Firefox 3, using pure CSS. It is 100% standards-compliant, AND renders almost pixel-perfect in IE6, with no hacks whatsoever. It really isn’t as hard as you people make it out to be. So stop whining and learn how to code.
( )Greg April 13th
“almost” pixel-perfect isn’t good enough for many people.
On the other hand, I’m sick of IE6 workarounds and will never enslave myself to them again (like the majority of the web dev community since IE8 appeared, it seems). Ugly transparencies? Float issues? Don’t care anymore.
( )JK April 24th
hi,
( )Most of you that read this will blow me off is my guess…but someone might actually answer…I am not a web-designer, but a new business owner and have a website. I did the test and got many errors on my site trying to validate…many in #’s of more than 50…I pay for a site thru a good size company in Boston. Obviously if I try to do any of these fixes, maybe I could learn it..my guess is probably not…most likely will screw it up…anyone want to contact me and offer some advice for what my next move should be..which direction I should go???If no one can offer anything, then I’d be surprised…but it’s not easy to find good help and after reading all these answers…perhaps someone might help another by telling me if my current web designers are screwing my business…or not……Any takers?>
JK
Hugo May 2nd
the CDATA thing should not apply for every self-respecting XHTMLdev, put ALL of your javascript in an external file. (Best in 1 file to reduce the number of HTTP-requests)
( )Rishi June 1st
Can anybody please help me….
( )if (this.value == ”) {
var errorMessage = ‘Required’;
$(”) /*Error Generated*/
.addClass(’error-message’)
.text(errorMessage)
.appendTo($parent);
};
I am getting error in this part which is inside the script tag. It says ’span’ is not permitted here. I am adding a span to a paragraph dynamically. Any help would be appreciated.
Rishi June 1st
if (this.value == ”) {
( )var errorMessage = ‘Required’;
$(”)
.addClass(’error-message’)
.text(errorMessage)
.appendTo($parent);
};