There can be nothing more disturbing than creating and styling a web page, thinking that you have it perfect, and then when testing it hitting upon some unknown display error that you simply can’t figure out. One of the tricks to fixing errors like this is to validate your markup and style sheets first. Luckily, there are numerous free tools out there to check whether your HTML, CSS and even your RSS feeds are valid. With these handy helpers, you can ensure that your visitors are experiencing your content exactly as you intend them to.
We’ve gathered up a mixture of 14 tools — both online tools and some Firefox extensions — so you can find the one that best suits your needs.
CSS Validator: Adds an easy-to-use link to the W3C CSS validator that you can access via a right-click context menu or from under the Tools menu.
HTML Validator: Based on Tidy and OpenSP, HTML Validator gives you an easy icon notification of the validity of any page you are visiting. You can request more information from the tool, and when you view Page Source, errors causing the page to be invalid are highlighted. Even better, if you can’t figure out what’s wrong on your own, the extension will make suggestions for you.
Page Validator: Either by opening the right-click context menu, or going up to tools and selecting “Validate Page”, Page Validator opens a separate tab and shows you the results using the the W3C’s online validation tool.
RSS Validator: RSS Validator allows you to easily check the validity of an RSS feed by using the right-click context menu or by making the choice from the tools menu. You are then sent to a separate tab to see the results and any potential errors.
Total Validator: Total Validator gives you a ton of tools in one handy extension. Browse to the page you want, click the “TV” icon and validate it against multiple versions of HTML, spellcheck it, take screenshots and more.
Validaty: Validaty allows you to add a button to your toolbar that will allow you to simply click it while visiting a page and view a simple visual representation to the validity of the page.
Web Based Validators
validator.w3.org: The W3C (World Wide Web Consortium) is the group that develops all of the standards for Web technologies, so it only makes sense that they would have a validator to check whether your HTML is correct. The file to be checked can be online or uploaded, and the validator can display its report in multiple formats — with recommendations, as an outline, with recommendations, and more. If you’re going to check your markup, it may as well be with the people who decree what works.
jigsaw.w3.org: The W3C also offer a CSS validation tool, which will also check your markup for any potential errors and warnings. You also have the option of setting different CSS profiles, specifying the medium that the style sheet was created for, and controlling how much information the report should display.
FeedValidator.org: FeedValidator will first make sure that the feed you pass it is valid, and then go through your most recent entries and give you a summary of problems, highlighting the actual lines where the problems exist. Very handy for making sure your feed displays correctly in various readers.
Relaxed.vse.cz: Relaxed does not use the official W3C specifications for validation, but instead uses some of its own to check out your document. You can choose which version of HTML for it to use, whether to display the source code, use a “dirty” parser, and there are a couple of other options. It is also available as a Firefox plugin, which adds the service directly to your browser.
Validome.org: Validome is like your one-stop shop for validators. This site offers tools for checking out your HTML, XML, DTD-Schema, RSS and Google Sitemaps. Each tool provides numerous options so that you can set it to best suit your needs.
VirtualPromote.com: VirtualPromote provides developers with numerous tools for different jobs, but the three important ones for front-end developers are the HTML, CSS and XML validators.
xhtml-css.com: xhtml-css.com gives any site a quick once-over, validating both the HTML and CSS in one go. The service will list any errors and possible warnings you may need to be aware of, and provide details about the nature of the problem. You can also use more advanced options to set different character encoding settings for your HTML, and for the CSS you can set the profile and medium that the stylesheet will be used for. The site also provides a Firefox extension called BeValid, that will let you validate the URL are currently visiting to speed up the process even more.
What’s your favorite validation tool?