How To Fix Validation Errors

W3C validation isn't very forgiving at times, just information technology allows you to see errors that are generated by your markup. Lots of errors and warnings thrown by the validator are a practiced indicator that your XHTML isn't in very good shape, and might non expect consistent across different browsers. Here are 10 sneaky validation issues that trip developers up, and how to avert them.

Earlier we go started, here are a few skillful practices to remember when using the W3C validator.

Don't sweat the warnings - If the validator says that yous have 12 errors and 83 warnings, simply worry almost the errors for now.
Knock off errors one at a fourth dimension - Work your way directly downwardly the list, top to bottom, knocking off errors 1 at a time. The HTML is read by the browsers from top to lesser, so the errors evidence the same way.
Re-validate the code later on each ready - Ofttimes one error tin exist causing multiple errors downwardly the page. Alternately, some "fixes" can crusade 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 fashion, let's take a wait at some of the reasons why your markup isn't validating.

i. An unclosed div tag

I of the most common reasons why layouts don't validate. It never ceases to amaze how oftentimes this is the culprit for a funky layout. Unclosed div tags are one of the most common layout mistakes, and too one of the hardest to diagnose. The validator doesn't always indicate to the proper unclosed div tag, so it's not e'er easy to find the needle in the haystack.

two. A rogue embed tag

In the early on 90'south, browsers similar 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 solar day. If you're really looking to get that strict DOCTYPE validation, you'll have to ditch the embed.

If you actually desire to accept valid markup and embedded media, effort using the Flash Satay method.

3. Improper DOCTYPE declaration

A frequent fault is either non declaring a DOCTYPE, or declaring the wrong DOCTYPE at the head of the document. Every bit a general rule of thumb, Strict DOCTYPE is the highest validation to shoot for. Strict validation means that you are webpages have the all-time shot at displaying properly across all browsers. Here'due south what a Strict proclamation looks like:

4. Trailing slash

If your site isn't properly validating, then there is a good chance that the reason is a missing abaft slash somewhere in your code. It'due south very easy to overlook something like a trailing slash, especially in elements like epitome tags. For example:

<img src="" alt="">

This won't validate against a strict DOCTYPE. Add a '/' earlier the img tag ends in every case to solve the event.

5. Marshal

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 run into errors. Align is some other depreciated tag that shouldn't be used anymore in markup. Instead of align, endeavor using float or text-align to shift the element.

half-dozen. JavaScript

If you've declared a Strict DOCTYPE, you'll need to wrap CDATA tags around your JavaScript code. This attribute of validation has tripped upwards many a developer, as sites tend to utilize in-line JavaScript for things like ads and tracking scripts. If yous have to include JavaScript, merely add these tags before and subsequently:

<script blazon="text/javascript"> /* <![CDATA[ */  // JavaScript here   }; /* ]]> */ </script>

7. Images e'er need 'alt' attributes

If y'all haven't noticed past at present, images are a major potential stumbling block for good validation. Aside from abaft slashes, they as well require alt tags that depict images, i.e. alt="Scary vampire picture".

Search engines are also relying on this alt tag to aid place images on the page, so it's proficient practice to add the alt tags anyway.

8. Unknown entities

Entities are another small pitfall that tend to stand up in the way of validation. Instead of using things like the "&" symbol, it's a good idea to utilise properly encoded characters. Here's an entire list of properly encoded character entities for utilize in XHTML markup.

9. Bad nesting

Nesting is when you have elements within of elements, like so:

<div><stiff>Sweetness!</strong></div>

It's quite piece of cake to get mixed upwardly, and mix is the order of nested elements. For example, starting the strong tag before the div tag, but closing the div tag get-go. This may not alter the look of the layout, but it will definitely keep your markup from validating.

x. No 'championship' tag

While it may seem similar an obvious problem, many developers (including myself), all the same leave off a 'title' tag in the 'caput' section every now and again. If you see the mistake "missing a required sub-element of Caput", then you know that you're missing a championship tag.

If you establish this post useful, delight vote for information technology on Digg.

Did you find this post useful?