Validating HTML5 in the browser

I like to be alerted of any validation errors that sneak into my markup as soon as possible. That’s why I find the HTML Validator Extension for Firefox very hard to live (well, work) without.

Unfortunately, it does not support HTML5. I’ve been looking hard for an alternative that does and has the same features as the HTML Validator Extension, i.e. runs locally in the browser without sending anything to a remote server and validates every page you load automatically.

No luck.

There are tools that validate markup by sending it to a remote server, either automatically or manually, but I don’t want that. I want to be able to check my work even though it’s behind a login or if I’m not connected to the Internet.

If you happen to know of a browser extension that solves this problem, please let me know. It doesn’t have to be for Firefox – Opera, Chrome or Safari would be fine too as long as it runs on my Mac.

Posted on June 3, 2010 in Browsers, HTML 5, Web Standards

Comments

  1. June 3, 2010 by Daan

    Apparently this Firefox plugin does HTML5 validation: https://addons.mozilla.org/en-US/firefox/addon/2318/

    I’m not sure how it performs, I hate FF so I’m waiting for the Safari Tidy update.

  2. June 3, 2010 by Pavel Linhart

    I’m using the extension you mentioned in the same way as you do, makes work a lot easier.

    Mainly I like it because it does its work without me needing to do anything - it just displays the error/warning count, if any.

    I tried Total Validator which Daan mentioned, but it does not work the way I would like it to (eg. the HTML Validator/TiDy way).

    The problem with it is, that by default it validates using an online-service, which is a no go. There is a Basic and a Pro Tool (paid), both need you to have JAVA installed (thats just a minor hassle), but the validation takes place outside of the browser/results display as a new page in a browser of your choice.

    Well, that is not the way I prefer…a little bit too complex…

    I would love to have an extension which performs in the way you described, with respect to HTML 5.

  3. I’ve been using the Web Developer Toolbar for validating HTML5.

    Right Click > Web Developer > Tools > Validate Local HTML

    It’s not as easy as the HTML Validator extension, but at least it works behind private files, or local development environments.

  4. I normally use the Web Dev Toolbar as well. The only problem is since it sends the page to the W3C Markup Validation service, the page needs to be live and outside a firewall for it to work. That means it can’t be used on a development site and can only check for errors after they’ve already been published.

    I recently started using Total Validator’s desktop app, but like Pavel said it’s not the best reporting results, and it’s not free, and not in a browser, although it will work on your LAN and it can crawl an entire site instead of just one page.

  5. June 4, 2010 by Ollie

    I don’t think you would want a html5 validator extension just yet, because:

    1) The spec changes so frequently that the validator doesn’t have to reflect the current state,

    2) the validator isn’t bug-free.

    Thus the creator the Firefox extension would have to really keep up-to-date with the changes, which doesn’t have to be easy…

    I would wait a bit; if the validator goes official some day, that would be the right time to start making extensions, I think.

  6. June 4, 2010 by Adam T

    Seconding the Web Dev Toolbar - but adding that I’ve literally just found that it does do ‘live’ HTML5 validation, a la HTML Validator.

    Tools > Display Page Validation

  7. June 4, 2010 by Pavel Linhart

    Adam T: Looks good, but actually it only makes a file out of your webpage and sends it to the W3 online validator on the background and then parses the results and displays them in the correct place of the toolbar.

    The validation results surely would be up to date as it gets, but it requires you to be online and it is quite slow - not suited for having it enabled for your whole development period, however it can be allright if you do casual checks.

  8. Perhaps this I might work for you . The W3C Validator but wrapped in a desktop app, and no need to be connected to the internet:

    http://habilis.net/validator-sac/

  9. June 4, 2010 by Roger Johansson (Author comment)

    Thanks for the tips so far, though none of them do exactly what I want ;-). Web Developer Toolbar’s “Display Page Validation” comes reasonably close, though it doesn’t validate files locally which is what I want.

    Francis: Unfortunately Validator S.A.C. doesn’t support HTML5 as far as I can tell.

  10. June 5, 2010 by orionlogic

    How about Henri Sivonen’s validator ?

    http://validator.nu/

    More info at : http://about.validator.nu/htmlparser/

  11. I’m in the same situation, Roger. Now that Rails3 is adopting HTML5 as default I’m kinda forced to use it (I’m more fond to XHTML and strict standards) but HTML Validator isn’t yet prepared :(

    For now I’m just ignoring validation errors concerning the new tags. The good thing is that it points out unclosed tags, case and quotes, which a HTML5 validator probably wouldn’t.

  12. June 5, 2010 by Roger Johansson (Author comment)

    orionlogic: Do you know if that is available as a browser extension (which is what I’m looking for)?

    Rafael:

    The good thing is that it points out unclosed tags, case and quotes, which a HTML5 validator probably wouldn’t.

    Good point. It would be very useful for HTML5 validators to offer a strict/XHTML mode.

  13. June 6, 2010 by orionlogic

    @RJ Sorry i don’t think so, but one can ask Mr. Sivonen about it.

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.