Validating your code using Unicorn

I am a big fan of the W3C web standards, for several reasons which I will write more about in future posts. All free website templates on andreasviklund.com are written using valid XHTML and CSS, and I recommend everyone to do their best to keep their code valid. One of the easiest ways to find validation errors is to use a validator service, and one of my favorites is Unicorn, W3C’s unified validator which checks the HTML, the CSS and XML feeds in one single test.

Test your code

Unicorn can test both published websites by entering the URL of the site, and single HTML/CSS files by using the file upload tab. Each test gives either a green light (if the code is valid) or a red light (if there are errors), and all errors are written out and explained which makes them easy to find in the code. The validator can handle many different standards, including html5. You can test it by entering “andreasviklund.com” in the URL field to see the result for the frontpage of this site. It will generate a green light for the HTML code since it consists of valid html5, and a red light for the CSS since I currently use two plugins which include CSS that is not valid. The fact that the errors are found in CSS which is not used on the site doesn’t matter, Unicorn finds the errors anyway.

In order to keep your websites optimized and as functional as possible, I recommend making it a habit to test your code every now and then – especially if you use a CMS and switch to a new theme or install a new plugin. In many cases, errors do not affect the rendering of the pages. But in some cases code errors can break entire layouts, and a validation check is an effective way of finding such errors.

Browser tools

There are also useful plugins and addons for most web browsers that give you the possibility to check the code of websites as you view them, for example the Web Developer Toolbar by Chris Pederick. It is available for the Firefox and Chrome browsers, and it is one of the most useful browser addons I know. I use it every day in my work as a template designer, and I recommend it to anyone interested in web design.

Got tips? Share them!

Do you know about any good validation tool that I should include in this entry? Post a comment with a link, and I will check it out.

css, html5, tutorials, web standards