HTML Validator extension for Google Chrome

Validating HTML is very important to ensure maximum web browser and operating system compatibility, and making sure it is ready for CSS and JavaScript code to interact with it. Therefore, I have created an HTML Validator for Google Chrome.

Background

Being an avid Firefox user myself, I have had tremendous use and inspiration from the two excellent Firefox extensions HTML Validator and Web Developer Toolbar when it comes to validate HTML. With that in mind, when I have developed my Google Chrome HTML Validator extension, I wanted to add the options to support automatic or manual HTML validation, for both local, i.e. non-publicly available, and public content. Therefore, the validation types supported are:

  • Inline validation
  • Validate URL at the W3C Validator
  • Send local HTML to W3C Validator

What is very right with the Google Chrome extension model

Just as a side-note, and after having developed a number of Firefox extensions before, there are a few good things about developing Google Chrome that is quite nice:

  • Only HTML, CSS and JavaScript skills needed – no other language.
  • Swift development – no web browser restart necessary, but an extension reload however.
  • Using localStorage for saving preferences.
  • The Google Chrome Extensions gallery. What is outstanding for developers is that I can update my extension whenever I want to, and it is public direct. No review queues, unnecessary wait etc – the control is in the hands of the developer.

Google Chrome extension

HTML Validator in Google Chrome resides as an icon next to the address field, and when it it is autorun/run inline, it displays a green badge with the number 0 if there are no validation errors, or a red badge with a count of the number of validation errors.

A picture of the Google Chrome toolbar with the HTML validator badge

If you click the HTML Validator icon, it will pop-up a panel at the bottom of the web browser, displaying information about the validation errors.

A picture of the pop-up panel displaying more information about HTML validation errors

Settings

A picture of the menu with HTML Validator actions and settings

Clicking the icon will also display a menu with validation options and various settings to customize it according to your specific needs. You can choose:

  • Whether it should autorun or not
  • Default validation type: inline or direct send to the W3C Validator
  • Decide how/when the pop-up panel at the bottom of the web browser should be shown
  • What should happen when you click the icon
  • If you want to use a timeout or not for the inline validation. At times, the W3C Validator might be slow to respond.
  • If you want a loading indicator or not to be shown

Keyboard shortcuts

Being a keyboard shortcut freak myself, there are three general options for the HTML Validator extension:

Windows/Linux

  • Press Ctrl + Shift + V to validate a page
  • Press Ctrl + Shift + A to validate a local page

Mac OS X

  • Press Cmd + Shift + V to validate a page
  • Press Cmd + Shift + A to validate a local page

On all operating systems, you can also press Esc to hide the list of validation errors in the pop-up panel.

Discussion and bug reports

And discussions, requests or bug reports are welcome in the HTML Validator discussion group.

Download/Install HTML Validator

So, if you are a Google Chrome user, what are you waiting for! Install the HTML Validator for Google Chrome now! :-)

Posted in Developing,HTML5/HTML/XHTML,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *