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
- Everything must be inside the
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
For the tags that don’t have closing tags, like
<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:
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.