17 August 2006 in Code, Intergen | Comments enabled

Many of us know that it’s a good idea to ensure what we develop is compliant with relevant standards (HTML 4.01, XHTML, maybe even E-Government Web Guidelines). However when it comes to actually ensuring that you’re developing sites that conform to these types of standards it can be difficult to validate that you’re doing it right.

I’m not going to delve into E-Government Web Guidelines in this post (it’s a much bigger kettle of fish than I can bring myself to write about at he moment) but will look at some tools that I find invaluable in aiding the development of pages that conform to W3C HTML & XHTML standards.

The Web Developer Toolbar

This is a fantastic extension to FireFox. It gives you great features – more than you would want me to talk about here – just trust me, it’s amazing. A couple of highlight features however that make standards development easier:

• Validate Local HTML
  This uses the doc type and submits local HTML to the appropriate W3C Validator. Perfect for dev environments where your pages are not publicly accessible.
• Validate Local CSS
  Same as above but for CSS
• Validate Feed, Links, Section 508 and WAI
  Each of these does their own validation, but can’t be done from local unfortunately but still fantastic for meeting more standards.

On top of this there are features that just help you out in a big way. Several features that I use almost every day when tinkering with HTML:

• View Style Information
  This gives you a cross hair to click anywhere on the page and it shows you exactly which styles, from what CSS file, are being applied at that point!
• Outline Table & Block Elements
  Rather than applying border styles to everything, just click the button and see where the tables and block level elements are. Colour coded for extra greatness.
• View Source
  Doesn’t sound like a biggy but it opens the source in a background tab, not a new window – fantastic.

As I mention, there are hundreds more features. If you touch HTML at all this extension should be installed right after FireFox. Click here to visit the homepage of the Web Developer Toolbar.

Web Accessibility Toolbar

This tool is an add-in to Internet Explorer and adds much of the functionality that the Web Developer Toolbar adds to FireFox. There are a few differences but they’re similar enough for me not to write heaps about this tool (refer to my feature comments about the Web Developer Toolbar).

Click here to get the Web Accessibility Toolbar.

Both of these tools should be installed, especially if you’re doing ASP.Net development as the server controls in ASP.Net render differently depending on the browser you’re using (you can make some changes using Browser Caps if you’re interesting in really getting into it).

- JD