Validating HTML5 with validator.nu and the HTML5Validator Extension for Firefox
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:
- Make sure you have Mercurial and the Mac OS X Developer Tools installed
- Open a Terminal window and set the
JAVA_HOMEenvironment variable by entering
export JAVA_HOME=/Library/Java/Home(note that the installation instructions actually say
JAVA_HTML, but that doesn’t work)
- 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.
- Previous post: A selection of Mac OS X keyboard shortcuts
- Next post: HTML5 sectioning elements, headings, and document outlines