Making your blog look good and work well is a major consideration of anyone who wants to do well in the blogosphere. Making sure your blog is valid and adheres to the standards of the W3C will ensure that your theme will look good in all browsers, even those yet to be released, be more accessible, easier to maintain and easier for search engines to crawl. So how do you go about making sure your site sticks within the guidelines?

A Great Base

One of the best things about WordPress is it's commitment to web standards.

Key Features

Full standards compliance --- We have gone to great lengths to make sure every bit of WordPress generated code is in full compliance with the standards of the W3C. This is important not only for interoperability with today's browser but also for forward compatibility with the tools of the next generation. Your web site is a beautiful thing, and you should demand nothing less.

WordPress About page

So WordPress endevours to display valid code at every step. Then there are themes. Any theme designer that's worth anything will make sure their themes are valid (X)HTML and cross browser compatible to fit in with the ideology above.

So how do you stop your theme from falling apart, causing hundreds of errors in a validator and becoming harder and harder to look after? I have noticed a few common mistakes in the (X)HTML of many blogs that I have visited, so here are a few tips on how to stay valid.

5 Tips And What Might Happen If You Don't Follow Them

Add alt attributes to all your images.

Whether it's an image in a post or a button on your sidebar, you need to include the alternative text. Without it, your blog is invalid and users who can't view images won't know what was supposed to be seen. The alt attribute is also useful as a bit of extra search engine optimisation, if your alt attribute describes the image and the image is relevant to your post, then there are more keywords available for the search engine bots to feed on.

Adding the alt attribute:

<img src="image.gif"
  alt="Short description of image" />

Close all your elements.

In HTML it was OK to write paragraphs as follows:

<p>Some text here in the first paragraph...
<p>Second paragraph here...

But in (X)HTML this no longer works, you need the all important </p> at the end of every paragraph (or the </li> after list items, or </ul> after lists, the list goes on). Not only will sticking to this make your code clearer to read, but not closing elements properly can mess up any javascript on the page too! So those paragraphs above should look like this:

<p>Some text here in the first paragraph...</p>
<p>Second paragraph here...</p>

Self close those single elements.

It's all very well closing paragraph and list elements, but you can't forget line breaks (<br />), images (<img src="image.gif" alt="example" />), links (<link rel="stylesheet" type="text/css" href="style.css" />).
They all have one thing in common, the trailing />. Make sure you include it too.

Make your lists behave.

WordPress uses lists a lot! Most sidebars are unordered list after unordered list, for the semantic and accessibility factors they provide. All too often this can be spoiled by an out of place paragraph or div or even another list. For example:

<ul>
<p>Out of place paragraph.</p>
<li>The real list</li>
</ul>

Just rememeber, whenever you are between an <ul> and an </ul> you must also be between a <li> and a </li>.

Embed videos properly.

I'm not one for video blogging, or even dropping in the occasional YouTube video, but many bloggers do and embedding flash content is hardly ever done correctly. For a start the <embed> element has never been supported by the W3C, it was made up by Netscape in the days of proprietary browser HTML. The way to do it is using the <object> element. I'm no pro, but there are two articles on embedding flash at A List Apart that clear things up.

So there you have it, 5 things you can watch out for to keep your blog posts and your theme valid. While they seem harmless now, when browsers move on the standards will stay the same and the valid and well constructed sites will last.

If there is anyway I can help and point out where your theme could be fixed up, please let me know and if there are any other tips you can give for keeping a site valid, please do share.

Update: Please check out my next post for an easy and quick way to check whether your pages are valid.

This post is part of the ProBlogger group writing project. If you have written a top five post, I look forward to reading yours too.