Friday, May 19, 2006

Validating a Blogger Page

Since writing my article on web standards, I have been trying to eliminate validation errors on this blog. Of course I am hampered by the fact that Blogger inserts HTML codes of its own accord. Here are the steps I've taken and the successes I've had. Hopefully this case study will aid others.

I thought that the most appropriate page to focus on was my article on web standards. Validating this page requires changing the markup on the page itself, as well as the overall blog page template. A trial run through the W3C validator produced well over one hundred errors -- yikes!

The first issue is that Blogger uses an XHTML doctype, which I am not overly familiar with. There is no point me trying to change the doctype, since tags inserted automatically are going to conform (we can hope) to XHTML. So I needed to get used to this and alter my coding to suit. A trip to the spec was called for.

I started with the easy stuff. The validator discovered many "empty" tags, such as <br>, <meta> and <img>, which needed to be written with a closing slash, like so: <br />. (And to write that out explicitly in HTML requires even further strategems. View the source for this page if you are interested.)

I have some coding habits left over from HTML 3 days. For example, I add border attributes to <img> tags and language attributes to script tags. These are deprecated, so I removed them. I noticed that some of the code I've got from other sources makes the same mistakes, the Paypal and StatCounter markup for example. There was also one use of a literal ampersand, which is to say & as part of text. This needs to be represented by the proper character entity, namely &amp;.

Further issues with code I'd copy'n'pasted included the omission of a block-level element within <noscript> tags, easily remedied by adding in a <div>. Or so I thought. This still caused some odd problems, so I ended up removing the block entirely. The justification is that I'm not concerned with tracking readers without Javascript. Presumably the RSS feed is good enough for them.

I use an inline stylesheet, since there is no way to upload a separate file to Blogger. The <style> tag was missing the attribute type="text/css". In other places validation found actual typos, like a missing quote in an attribute.

Two specific errors caused me problems. In order to get posts showing up on the home page with a "more..." option, I use a method that wraps part of the post in a <span> that is set to be hidden on the main page but visible on item pages. This is a problem because within a page I might use header tags to indicate structure. This nesting of a block-level element inside an inline element is invalid. The fix is to use a <div> in place of the <span>, with exactly the same stylings. I fixed this for the page in question, but doing so across the site is going to mean editing every single article, something I'm unlikely to want to do. Some things are better to get right the first time!

The other issue is that Blogger inserts breaks automatically to space out content in articles. This means that even between list items there are <br /> tags -- again invalid syntax. The only fix for this is to not use line breaks between a closing </li> and the next <li>. Ugly, but it works.

I encountered an issue with the Paypal form, and this one took me quite a while to investigate. All of the <input> tags within the form generated a nesting error. The only way I could think of fixing this was to put a <div> immediately within the <form> tags, and since this worked I deduce that it is a requirement. I can find no documentation on this, however.

One problem I did not encounter, but which is worth noting, is that XHTML requires tags in all lower-case letters. I write this way already, but for some of you that could be difficult to get used to.

With all of this done, I took one last pass through the validator and got only two errors. Both of these are for the same reason, use of the deprecated name attribute, and both are in the code for the Blogger Bar at the top of the screen. That will have to stay.

Following standards is not an all or nothing affair. Reducing validation errors gets you closer to conformity, and even if you do not reach 100% your page will reap some of the benefits. I'm happy with the progress I've made and what I've learned from the process.


1 comment:

robin said...

I have not used the new Blogger templates and have given up on getting markup to validate. Eventually I will port anything important over to a more complete CMS solution.

Post a Comment