Validating HTML5 with validator.nu and the HTML5Validator Extension for Firefox

Back in June last year I posted a question about Validating HTML5 in the browser, looking for a tool similar to the HTML Validator Extension for Firefox that supports HTML5.

Unfortunately no such tools seem to exist, which makes quality assurance of HTML5 a lot more time consuming than I would like it to be. Not happy with that I decided to take a look into doing something about the situation myself, and I managed to come up with a solution that satisfies my personal HTML5 validation needs for now.

The solution involved two things:

  • Installing a local instance of Validator.nu (which validates many HTML variants, including HTML5) to avoid spamming the W3C or Validator.nu servers and to avoid sending potentially restricted or sensitive data to a third party server.
  • Creating a Firefox extension that uses the local Validator.nu to automatically validate all pages you load in the browser (including those that are password protected, on local domains, or behind a firewall) and display the result in the status bar.

Installing a local Validator.nu on Mac OS X

The easy part was installing a local instance of Validator.nu. I got it up and running on Mac OS X without any major problems. Here’s how:

  1. Make sure you have Mercurial and the Mac OS X Developer Tools installed
  2. Open a Terminal window and set the JAVA_HOME environment variable by entering export JAVA_HOME=/Library/Java/Home (note that the installation instructions actually say JAVA_HTML, but that doesn’t work)
  3. Follow the rest of the Installation instructions

Once you’re done (it will take a while to download all the stuff that’s needed) you should be able to access your local Validator.nu instance by going to http://localhost:8888/.

For other platforms I don’t know how easy or hard it is to get Validator.nu up and running, but according to the installation instructions it works on Ubuntu but not on Windows.

Creating the HTML5Validator Firefox extension

The next step took quite a bit longer since I’d never attempted to create a browser extension before. I had a look at what it would take to create extensions for Safari and Firefox, and decided to start with Firefox. It actually seems a bit easier to create Safari extensions, but I didn’t want to go through the hassle of registering for the Safari Developer Program.

After what turned out to be quite a lot of time spent reading tutorials (thanks for writing How To Develop A Firefox Extension, Robert) and documentation on Firefox extension building I’ve finally got an HTML5 Validator extension for Firefox that does the job I need it to do. Try it if you want to. I am not aware of it causing any problems, and I don’t see why it would, but no warranties, guarantees or such of any kind are attached.

Being my first Firefox extension I know that it’s far from perfect. One of the biggest issues I’m aware of is that it needs to refetch each page before checking it since I haven’t been able to figure out how to get the source from the browser cache. It will also re-run the download + validation procedure when you switch between tabs since I don’t know how to cache the results for each tab. (This has been fixed in the latest version, see the update notice below.)

That’s all done in the background through Ajax though, so performance-wise I haven’t noticed any problems at all so far. However this is something I would like to find a better solution for.

There are lots of preferences I could imagine adding to the extension as well, but for now the only one is where to find your local Validator.nu instance (the default is http://localhost:8888/).

Oh, and I couldn’t resist using the HTML5 logo for the statusbar icon. Validator.nu does validate HTML 4.01 and XHTML 1.0 (though it insists on always throwing a couple of errors for XHTML served as text/html) as well as HTML5, but the extension’s main purpose is to help validating HTML5. I could add a case-insensitive match for <!DOCTYPE html> to make the extension only validate HTML5 documents, but Validator.nu tends to catch some HTML 4.01 errors that the W3C Validator doesn’t, so I think it can be useful to let it check all documents.

Worksforme, maybe for you

Feel free to use the extension to validate your HTML, but please be aware that I don’t plan on spending much time on polishing or supporting it. Like I’ve already said it does the job I need it to do, and I built it mainly for my personal use. If someone can show me how to access what “View Source” displays from a Firefox add-on I’ll look into fixing that part though to avoid re-downloading every document.

Update: The HTML5 Validator extension has received a number of updates and can now be found on GitHub. See the html5validator on GitHub for source code and downloads.

Posted on February 10, 2011 in Browsers, HTML 5, Productivity

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.