As part of my experiments with social media sites I came across the iBlogStats site.  Its a great external dashboard for your blog, but it gave me a nasty shock by highlighting I had about 50 xHTML validation errors on my homepage!

Over the past month I’ve found that my posts have consistently had 40 to 50 validation errors before I manually hunt them down and resolve them.  All of the posts were published using a combination of Windows Live Writer (WLW) and WordPress.  While I find them to be very easy to use the lack of quality in the output (and the effort required to repair it) made me wonder whether I’d chosen the right platform for my blog.

Some of the errors I was experiencing:

• paragraph end tags with no begin tag
• div tags surrounded by paragraph tags
• attribute construction errors where a title attribute had been moved within hyperlink, and had been concatenated with the href attribute instead of relocated after it
• img tags that weren’t properly terminated

… and the list goes on.  To make matters worse I couldn’t resolve the errors directly in the WordPress online editor because it insisted on converting div tags to paragraph tags, destroying the visual style of the posts in the process!  I had to maintain a copy of the original post HTML elsewhere, edit it in a text editor then paste the repaired HTML over the existing content shown in the WordPress editor.  A rather tedious process.

A little time on Google found some tips that have dramatically improved the quality of automatically generated xHTML:

• Turn off the visual editor in WordPress: 
  (via Weblog Tools Collection and More than scratch the surface) 
  In WordPress’s admin interface, switch to the users tab and edit your current user. Uncheck the "Use the visual editor when writing" option.  This resolves the "div converted to paragraph tag" issue mentioned above, and various other errors introduced when WordPress "fixes" your HTML, so validation errors can now be repaired online.
• Configure Windows Live Writer to publish xHTML:
  (via whateverblog)
  Windows Live Writer did such a good job of detecting my blog settings that I didn’t even think of manually configuring it to publish xHTML.  How embarrassing! In WLW select the Weblog\Edit Weblog Settings menu item.  Open the Advanced configuration options pane.  Make sure "Markup Type" is set to XHTML.
• Be careful where you "Insert Tags"
  If you use the Web Layout view to write your post, be careful where you call the "Insert Tags" feature.  WLW uses paragraph tags and non-breaking space to add blank lines to your post.  If you are not careful you might insert your tags after a non-breaking space on a blank line and inadvertently wrap the tag’s div directly within paragraph tags.  When you validate the results this will be highlighted as an error.

While some errors remain the volume is more manageable (a couple per post) and they tend to be easier to resolve.  The most painful one remaining is the "attribute construction error" but it is looking more and more like this has been introduced by one of the plugins I’m using.  I’ll continue debugging my configuration and report back if I ever manage to track this last major bug down!

Have you ever tried writing a hReview in Windows Live Writer (WLW)?  Its not easy.  There is no support built into the GUI for the microformat, I couldn’t find any publicly available plugins to add the capability (though some have apparently been written), and if you try to write the review by hand you have to do so in the HTML Code view lest Windows Live Writer helpfully modify or remove a critical div or span tag for you and break the data format.  As I said – its not easy.

This is a problem because microformats are gradually gaining momentum in the blogosphere.  In particular the hReview microformat is proving useful for blogs:

hReview is a simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in HTML, XHTML, Atom, RSS, and arbitrary XML.

Writing your review in this format allows services such as Pingerati and LouderVoice.to aggregate and redistribute your content, giving your views access to a wider audience.

In my search for a hReview plugin I stumbled across this post by one of the Microsoft team developing Windows Live Writer.  It announced a Dynamic Template plugin for calling customisable templates including dynamic content and forms for entering field values.  This seemed my best option for quickly adding some level of hReview capability to Windows Live Writer.

The result is the form you see here.  I’ve found the best approach to applying it is to enter the fundamentals of the review (item, type, URL, ratings, tags, etc) via the form, then finishing the details of the Overview and Description sections of the review by hand in your favourite WLW view.  This lets the template deal with the fiddly pieces of the hReview format (correctly specifying the classes, and span and div tags) without forcing you to spend too much time entering content directly into the restrictive form fields.  As templates are uni-directional – you can’t "round trip" from the hReview form into WLW then back into the form again – you will need to use the HTML Code view if you want to edit the ratings later   Please note you must be in HTML Code view when invoking the template or the abbr tag in the posts title will be damaged (appears to be a Dynamic Template limitation).

You can download the template and sample stylesheets below.  The easiest way to install the template is to double click the .wlwtemplate file after downloading, assuming the Dynamic Template plugin is already installed. The template file needs to be copied into your Application Data\WLWTemplates directory before the Dynamic Template plugin will recognise it.

If you need any additional information about the template’s installation or usage then please refer to its project page.  A post created using the template and styles above can be found here. 

If you have any questions or feedback about the template then please leave a comment below.