HTML and XHTML - HTML & XHTML tutorial
- Added: Aug 11th, 2005
- Level: Easy/Medium
- Author: Melfina
- Reads: 27,103
- Description: The main differences between them and how to convert your HTML pages to XHTML.
Cross-browser compatibility is the first thing one would think about when we decide to change our imperfect HTML pages to XTHML, but it's not exactly like that. When the HTML use began, each browser built its own way (similar, yet different) of displaying our page coding instead of agreeing about what could be used and how. It's the time to stop that, we want and we will code our pages according to the Wide Web Consortium standards.
By doing this, it doesn't mean our validated XHTML pages will look the same in all browsers, don't be mistaken: they won't.
Of course, when using XHTML, you can save your pages as .html, .htm and even .php, we're just changing our coding. We will be able to correct any errors by using a validator.
I'll try to explain the things you have to bear in mind when making your first XHTML page or to convert your HTML coding to XHTML.
Lowercases
All markup and properties must be in lowercases only. They will not validate if they're written like <Head> or <HEAD>, only if it's <head>.
Closed Markups
In XHTML all markups must be closed. Remember the HTML basics tutorial? we made a difference between open (<br>) and closed (<p>Text</p>) tags, well, there are no open tags in XHTML, for example:
<img src="image.jpg" alt="My Image"> must be:
<img src="image.jpg" alt="My Image" />
Notice the space and / at the end of the image code. Of course, the closed tags will be the same.
Do not ever omit closing tags either: <p>Text is completely wrong, you should put <p>Text</p>.
Tags order
You should use the opening and closing tags in the right order when you put one inside another. In HTML too, but remember XHTML is much more strict, so be careful when you place them.
WRONG: <b><i>Text</b></i>
RIGHT: <b><i>Text</i></b>
The italic tag is inside the bold tag. You could put it the other way round (<bi><b>Text</b></i>), in this case it doesn't matter (note: it does matter with other tags) but never mixed!
Values
All the properties' values must be between quotes ("). That should also be done in HTML, but some people omit them. Don't do it!
WRONG: <img src=image.jpg alt=My Image />
RIGHT: <img src="image.jpg" alt="My Image" />
Images
when using images you will have to specify the alt tag. It doesn't matter if it's empty, but it must be there.
WRONG: <img src="image.jpg" />
RIGHT: <img src="image.jpg" alt="" />
Doctype
We need to put the right XHTML doctype at the very beginning of the document. It has the following structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Ver Type//EN"
"Path to Type DTD">
We've got to choose the right XTML version and Type of Validation depending on the code we're using. There are the following types:
- Strict: As the name says, the most strict version. It doesn't allow, for example, table and font tags and all the page's formatting must be done with CSS or XSL. The xhtml doctype is:
We should also add a value to our html tag (named namespace) that informs the browser that we're using XHTML in our document, like this:
If you have everything explained here clear and made your first XHTML page (or maybe not the first one) you may want to validate your code here and find out any errors your code may have.
If you like this tutorial why not 
digg it or 
add to del.icio.us?
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.