Everyone’s going on about XHTML nowadays, and you’re probably beginning to get a bit worried that your site must be infinitely inferior to the rest of the web as you’ve got no clue what XHTML is, and your site’s just coded in plain old HTML.

XHTML stands for Extensible Hypertext Mark-up Language and is a hybrid of XML and HTML. The basic principle behind it is that all pages designed in XHTML should look the same across all browsers and platforms, thanks to the way in which XHTML documents are parsed. I won’t try and bore you with an indepth explanation, but those nice people over at Wikipedia have an explanation that might make your head hurt. But if I were you, I’d just take my word for it that you should be coding in XHTML, and if you do so your sites should continue to look as you intended as the Internet continues to evolve. It’s all about trying to get a set of global standards that everyone follows so that no-one gets left behind… not too much anyway.

So anyway, you want to change your old HTML coded site into an all singing all dancing XHTML site. It doesn’t take a lot to drag your site out of the dark ages, just a few common principles to follow and some minor changes to your site. Optimising for search engines and building your site with CSS is another story though, which I’ll cover sometime in the near future.

1. All tags in lowercase please

Turn your caps lock off, do a match-case find-and-replace for all <P> tags and replace them with <p>. Find the next tag and repeat. We all hate stuff written in all caps anyway, so it shouldn’t be much of a chore.

2. Close all tags!

XHTML must be valid and able to be correctly parsed! I’d hope you’re in the habit of <p>Closing your paragraph</p> tags anyway, as well as your <li></li>, <ul></ul> tags and so on. But what about all these tags like the <img> one, and <br>? They’ve gotta be closed too, but not like your paragraphs. Tags without a closing element need to be closed as follows with a “/” before the “>” (/ >):

<img src=”hand.gif” width=”100” height=”100” border=”0” alt=”John Leslie’s Right Hand” />

<br />

<hr />

I’m sure you get the idea. But please note, this also applies to header tags such as:

<meta name=”keywords” content=”keywords, go, here” />

<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />

Close them all! This way the browser will know not to go looking through the rest of your code for a closing tag that’s not there!

3. Nest your tags correctly

You should close your tags in the order that you opened them. Here are a couple of examples:

WRONG – <p><strong>Hello!</p></strong>

CORRECT – <p><strong>Hello!</strong></p>

Seems obvious doesn’t it, but you’d be surprised how many people do it the wrong way.

4. Use double speech marks

Inside your tags, for example the image tag, remember to use your double speech marks. So not width=100, but width=”100”.

5. Add your alt tags

I’m not 100% sure if this is a requirement for XHTML, but you should be doing it anyway. Images are no use in text-only browsers or screen readers UNLESS you add alt tags explaining what the picture is of. And if you’ve got spacer images, use alt=”” for consistency. Please don’t put the word “Spacer” in as that’ll just be really annoying and doesn’t actually add any value. The spacers are only there to aid the visual structure of the site.

6. No more <font> tags!

They’re horrible, clunky and limited. Get rid of them! Use your paragraph and span tags where applicable to style and size your text. It’s some of the most basic CSS to do this, and if you’re not familiar with the basics yet, you really should be – so get Googling!

7. Use character entity codes

This is reasonably simple, instead of using & use &. There’s a huge list of them all here.

That wasn’t that hard was it? Now you’ve tidied your code up, it’s probably time to start thinking about step number…

8. Code your sites with CSS

Not part of the XHTML thing, but it’s definitely the next step. Coding your sites in CSS will allow for much more control over the appearance of your site, it’ll make your page size loads smaller, and you’ll be well on your way to fully optimizing your site for all the major search engines. My tips on how to do this will be winging their way to you via this blog soon!

A useful link: HTML Elements Index. It’s a great list of what you can and can’t use in different versions of HTML and XHTML.

Basically, it’s a way of writing your HTML in a more meaningful, structured and to be honest, sensible way. It’s all about using your header tags (H1, H2, etc) for yep, you guessed it – headers, instead of bolding the text and increasing the font size with the old <font size=”10000000000000000000″> tag. For paragraphs, use the <p> tag rather than sizing the font and adding hundreds of line breaks, for lists use the <li> tag, and so on.

If you want to add an image, you use the <img=…> tag because it’s the tag for inserting images, so it stands to reason really that when you’re adding a heading, list, etc, you use the correct tag, not some sort of bodge. Got it? Great.

So why use Semantic HTML? What are the benefits? Why can’t I just do things my way?

Well you can just do things your way if you want, but I’d probably not advise it. The biggest benefit of using Semantic Code is that you’ll be adhering to the Internet standard. And the benefit of that is that when things change and progress as they like to do on the Internet, the stuff that makes your site work isn’t going to get left behind.

Another great benefit is that it’ll make your pages load quicker. You whack all the crap and formatting in an external stylesheet, and it only needs to be declared and loaded once. For example:

1. Crappy HTML – <font size=”3″ color=”#000000″><i>HELLO!</i></font><br><br>
2. Over the top XHTML – <div class=”big_heading”>Hello!</div>
3. Semantic HTML – <h1>Hello!</h1>

Make sense? Lovely clean, uncluttered code. All the browsers and all the software know that number 3 is a heading. The other two are, for all anyone knows from looking at the code, just some formatted text. And if you check the HTML of this page, you’ll see that I also use the list tag there, because yep, it’s a list.

It’ll also make the tedious task of making a website cross-browser compatible a lot easier.

But why do I care what my code looks like? I just want my site to look pretty!

But it can still look pretty! Both inside and out! And what’s the point in your site looking pretty if no-one can find it? Semantic code is also great for SEO! GoogleBot and co love semantic code. They don’t judge your site by how pretty it looks, they look at your code and work out what’s important, pick out keywords etc. The less clutter, and better formatted it is, the easier GoogleBot can find what’s important in your page.

If there’s a heading tag <h1>Gay Bars in London</h1>, GoogleBot’s going to note that down as being important and that the site’s obviously about Gay Bars in London. It’s common sense really. When GoogleBot sees<font size=”23694″ color=”pink”><b>Gay Bars In London</b></font>, he thinks “what’s all that crap around those words?”, not “there’s a heading!”.

Accessibility

And here’s another benefit – it’ll make your code accessible. Screen readers (what a blind person would use to surf the net) work in a similar way to the search engine bots in that they don’t care how pretty your page is, they want to know what the content is, and then read the text out loud for the end user. Now, to be of any use, the website needs to be read in the right order. If you’ve got messy code everywhere the screen reader is going to get confused and possibly misinterpret your page. And please, take note that the <b> or <em> tags are used to add emphasis to something, and in screen reader language that means it’ll “shout” it, so do think carefully where you use those tags. If in doubt, a top tip is to set up a style in your CSS that bolds the text and use <span class=”b”>Hello</span> instead. Similarly, we all know that in Internet speak, writing in capital letters is considered shouting, so if you’re using capital letters somewhere for visual effect, use a text-transform style in your CSS so your content isn’t shouted at the user.

In Summary

So to sum up, please code your pages semantically. It’s for the benefit of everyone, and once you learn how to do it, it’ll save you time too. Just writing short tags instead of styling everything up in the body of the page means a lot less typing for you. And above all, it’s just the right way to do things!

And to finish, here’s a little quiz for you. Just highlight the black blocks to reveal the answer.

For a heading, what tag should you use? Answer: The Heading tag

And for a list? Answer: The List tag

For a paragraph? Answer: The Paragraph tag

Now give yourself a pat on the back and sort your site out!