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.
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:
1 |
<img src="" alt=""> |
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:
1 |
<script type="text/javascript"> |
2 |
/* <![CDATA[ */
|
3 |
|
4 |
// JavaScript here
|
5 |
|
6 |
};
|
7 |
/* ]]> */
|
8 |
</script> |
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:
1 |
<div><strong>Sweet!</strong></div> |
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.
