Updating your site from HTML to XHTML
Now, I know this isn’t exactly the most advanced post in the world and is going back to basics quite a bit, but given the amount of basic questions I get asked on the subject I thought I’d jot down some points on it.
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.
Subscribe |
Comments RSS | Trackback | Leave a response
November 19th, 2007 at 10:11 pm
Hi, nice article, it’s amazing how many pages are out there that just ignore these simple rules, even new pages.
Also I would like to add a couple of things to the list.
- Add a DOCTYPE to the doc (I think XHTML 1.0 transitional would be the best to start).
- The attributes should also be in lower-case, not only the tags.
Keep the good work!