Slow transition to XHTML (part 1)

HTML has been arround for a few years (since 1997, so quite a few). After all these years, I think it’s time that we move on?

The transition from HTML to XHTML is something quite a few people are affraid of, but I don’t see any reason to it. XHTML is almost the same as HTML, except for some tags that are depreciated in favor of CSS styling (the <font> tag comes immediately to mind).

To make this transition easier, I have a few tips which you can follow.
First of all, before we start, make sure your site is at least valid HTML.

  • A HTML page needs a head and a body.
  • Every page needs a title, even if it is opened inside an iframe.
  • There can be nothing between the <head> and <body> tags.
  • Everything must be inside the <html> container.

This sounds fairly simple, you say? If I got 1 eurocent for every page I encountered that didn’t have these things, I would be rich! Anyway, make sure your pages have it in order, before you continue.

1. Mind that case

Mind the case you use. HTML was all uppercase for tags and attributes, XHTML is lowercase. This can be quite some work, but with the upcoming points you need to change them anyway.

2. Close your tags

Make sure you close your tags! If you’re using headers, paragraphs, lists, tables. Make sure that you have a closing tag for every opening tag. So if you have used <p> five times on your entire page, you also need five </p> tags.
For the tags that don’t have closing tags, like <br> or <img>, you can close them as well, like this: <br /> and <img src="" />. As you can see, you only have 1 tag, but it is both opened and closed.

3. Nest them properly

Since you now have closed all tags, make sure they are nested properly. If you open a paragraph first and than a span, you need to close the span first before the paragraph.
This looks like this: <p><span>Some content</span></p>

4. Quote those attributes

All attributes need to be quoted. Let’s take an image as an example.
This is the bad way: <img src=logo.gif height=400 width=300>
This is the right way: <img src="logo.gif" height="400" width="300" />
As you can see, the tag is also closed.

That’s it for part 1. If you look at your code, you should see, that it is already cleaner than it was before.

One Response to “Slow transition to XHTML (part 1)”.

  1. The thing you said about being rich is so true….people never check for any of those 4 things…OK, almost never.

Comments are closed.