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.
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.
Firebug is a full-featured debugger and editor that allows you to work
errors that may be occurring in them, and learn what you need to do to
repair them. An essential tool in just about every designer’s arsenal
of tools, Firebug has become so commonplace that it has even begun
getting its own extensions (such as SitePoint’s own CodeBurner reference tool).
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.
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 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 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 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
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.
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
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 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 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 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 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?