Free HTML and CSS Validation – Use It!

One of the most important aspects to creating a website is making sure the pages can be interpreted by most web browsing software, like Internet Explorer, Firefox, Chrome, Opera, and others. Of course all of these browsers have a number of different versions being used, which creates all sorts of issues for web developers in terms of making their sites compatible with all of the versions. While your site may look OK in IE7, it may fall apart in IE6, or look a little off in Chrome. This is usually due to the way these browsers interpret HTML and CSS code. Even though there have been huge efforts to standardize HTML, (W3C) there are still plenty of differences in browsers and the way they display web pages. But, the cause of most web page problems is due to sloppy HTML or CSS code, which is usually easy to troubleshoot.

Where to Start When Troubleshooting Web Pages

The simplest way to troubleshoot the code web pages are built on is to make sure it conforms to the W3C standard. While there is some debate about whether having pages ‘validate’ or not is really necessary, there is no doubt that the validator can find mistakes in both HTML and CSS, which can save you hours of searching for bone-headed coding errors. The W3C Validator should be your first stop on the road to troubleshooting code. If the site is live on the web, just paste the page link right into the validator, or if it is not live, just copy & paste the generated HTML right into the validator’s ‘Direct Input’ form. It will scrutinize your HTML and find any non-standard conventions, mistakes, or just typos, etc…

Use the Custom Options

A handy feature of the validator is the ‘More Options’ section – this allows you to fine-tune the results for your needs. Checking the ‘Show Outline’ box will give you an overview of the page’s structure to make sure you are using H1, H2, H3 tags correctly. This is a big help for SEO. The ‘Show Source’ option allows you to see the errors right in your original code. It’s like having a paper graded by your elementary school teacher!

More Options in the W3c Validator

The ‘Verbose Output’ option will give more details than you probably wanted, but the suggestions are helpful and you might learn something new.

Don’t Forget the CSS Stylesheets

The other important part of the validation system allows you to check your CSS code. It is very easy to overlook some of the obscure syntax (or even the not so obscure!) when writing stylesheets. Just paste a link, upload a file, or copy the code straight in – the validator will do the rest and let you know if there are any mistakes. It will also show any warnings for non-standard code.

Just like the HTML validator, the CSS checker gives you options, even allowing you to validate against different versions of CSS – VERY helpful if you are writing mobile apps or web pages. Clicking the ‘More Options’ link will open a little dialog with the following dropdown for ‘Profile':

More options for CSS validation

The ‘Medium’ selections will even allow you to validate based on the intended viewing medium…screen, projector, print, braille, handheld, etc… Pretty cool!

Save Time and Just Check It!

It seems like a no-brainer, right? Just run your code through the W3C service and get quick, accurate results, which will save time and money. Best of all, it is free…and won’t confiscate your chewing gum.

HTML Validation

CSS Validator