XHTML Validation

Introduction
In this XHTML tutorial I will discuss the main functions of XHTML, and how to apply XHTML to your pages. XHTML is in fact very simple, you only need an eye for details. In four different sub-articles I will teach you how to write correct XHTML and which rules need to be followed when writing XHTML.
In the first sub-article I will explain why it is important to make the step from HTML to XHTML. You will find out that the step is very easy to make. If you already have some knowledge of HTML, this will be a piece of a cake for you.

0: XHTML
- 0.0 | About XHTML
- 0.1 | Advantages of XHTML
1: Tags
2: Attributes
3: Doctypes
- 3.0 | Doctypes in XHTML
4: Validation
- 4.0 | Validating your XHTML

0: XHTML
0.0 | About XHTML
XHTML will soon replace HTML 4.01. Whereas HTML is an application of Standard Generalized Markup Language (SGML), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools—unlike HTML, which requires a relatively complex, lenient, and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 is a World Wide Web Consortium (W3C) recommendation.
top

0.1 | Advantages of XHTML
I already showed you the first advantage. XHTML will perform better then its predecessors. The second advantage is that of clean coding. XHTML requires clean and strict coding, which will result in compact pages with less errors. A third advantage is that web-pages are more cross browser compatible. Your pages will work better in browsers like Internet Explorer, Opera, Safari, etc.
top

1: Tags
1.0 | Tags in XHTML
I the introduction I already told you XHTML is more strict then HTML. There are a few demands your code should be able to live up to, in order to make them valid XHTML tags. In regular HTML, those demands were not in place, thats why I will discuss them piece by piece.
top

1.1 | Lowercase
Probably the biggest change from HTML to XHTML is that everything needs to be lowercase. This means; no capitalized characters. Standard HTML was not case-sensitive.
An example; This is all wrong:

Code: Select all: <Table> <TABLE> <TablE>

The only correct way to write down this tag in XHTML is like this:

Code: Select all: <table>

top

1.2 | Settled Tags
Another big issue with XHTML is that you have to settle tags correctly. As for saying, you need to correctly close your tags, in the order you opened them. So wrong would be this:

Code: Select all: <p><b><i>Page text.</b></i></p>

Why is this wrong? Because the tags are not closed correctly. The </i> tag should have been before the </b> tag. SO the correct code would be this:

Code: Select all: <p><b><i>Page text.</i></b></p>

top

1.3 | Close all tags!
One of the most difficult changes will be the closing of all tags. In XHTML you need to close all existing tags in your files. Of course in HTML you already had to close alot of them, like:

Code: Select all: <p></p> <b></b> <div></div>

But there were also a number of tags that did not need closing. The most commonly know tags of this type were:

Code: Select all: <br> <hr> <img>

In XHTML these tags need to be closed too. This can be done in two different ways.
The first way to do this might sound like a logical solution to you; just add a closing tag, like this:

Code: Select all: <br></br> <hr></hr> <img></img>

The second way to close them, you add the closing tag, to the existing opening tag. Now this might sound a bit strange, but it is actually possible. Do it as stated below:

Code: Select all: <br /> <hr /> <img />

When you get used to using this method the second option is probably the most easy to use. This option is also recommended by the World Wide Web Consortium (W3C)

You might have noticed that we added an space in front of the slash /. This is not necessarily needed. So <img/> could be correct too. But we still advise you to use the space, since XHTML might give trouble for visitors with older browsers like Internet Explorer 6. The slash / is placed in front of the rightside arrow >. And an image tag could then look like this:

Code: Select all: <img src="image.jpg" width="100" height="50" alt="alternative text" />

top

2: Attributes
2.0 | Attributes in XHTML
In the above text you have learned about the different rules that apply to tags within XHTML. In this sub-article we are going to review the rules that apply to attributes inside tags with XHTML. If you know something about HTML, you know that attributes are sometimes added to tags, and some tags can't almost live without their attribute. For example the a tag with the href attribute.
top

2.1 | Lowercase
Just as this rules applies to the XHTML tags, the lowercase characters need to be added to attributes too, as stated above, lowercase means no capitalized characters. In HTML you were allowed to write this:

Code: Select all: <a HREF="page.html">

In XHTML you are not allowed to do that anymore, and you should write it down like this:

Code: Select all: <a href="page.html">

top

2.2 | Use of Quotes
In HTML you were allowed to remove the "quotes" on numeric values. In XHTML you are not allowed to remove those, and you are forced to make use of them. For instance, this would be wrong:

Code: Select all: <img src="image.gif" width=100 height=50 alt="alternative text">

In XHTML you have to use the following syntax:

Code: Select all: <img src="image.gif" width="100" height="50" alt="alternative text" />

top

2.3 | Minimizing Attributes
It was very useful in HTML to minimize different attributes to spare time and room. Minimized HTML attributes could look like this:

Code: Select all: <option selected> <frame noresize> <input checked>

However, in XHTML it is no longer correct to use this sort of syntax. You need to write all of the code as stated below:

Code: Select all: <option selected="selected"> <frame noresize="noresize"> <input checked="checked">

top

2.4 | 'id' Instead of 'name'
This is a big change. In HTML you were used to using these kind of attributes for your tags: a, applet, frame, iframe, img and the name attribute. The name attribute is now replaced by the id attribute. So this code would be wrong:

Code: Select all: <img src="image.gif" name="myimage">

In XHTML you would have to use:

Code: Select all: <img src="image.gif" id="myimage" />

There is only one problem, and that is that this XHTML code is not yet cross browser compatible. Therefor it is wise to use both these attributes, so id and name.
Here is an example:

Code: Select all: <img src="image.gif" id="myimage" name="myimage" width="100" height="50" alt="alternative tekst" />

top

3: Doctypes
3.0 | DocType in XHTML
In XHTML you are forced to make use of a Doctype. In HTML it was already good to use it, but you were not forced to use it, now you are. The Doctype Declaration is always written on the first line of your document. So even before your <html> tag. The Doctype is used by different browsers and validators(programs which check pages for errors) to check which syntax should be used for the XHTML document. There are three different kinds of Doctype that can be used inside your XHTML code.

Strict
Transitional
Frameset

top

3.0.1 | Strict

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You can place the above stated code, as said, on the first line of your document. The strict Doctype is used when you need a clean code, and do not have the intention to use special mark-up tags. This Doctype is usually combined with Cascading Style Sheets (CSS).
top

3.0.2 | Transitional

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional Doctypes are used when creating a web-page that is aimed at presentation, and when you want to make your web-page compatible for browsers that do no support style sheets.
top

3.0.3 | Frameset

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Frameset Doctypes are used when creating a web-page which includes frames.

Now I have explained three different Doctypes to you. When you want an overview of all tags which are, and the ones which are not supported by the different Doctypes, I suggest you take a look here.
top

4: Validation
4.0 | Validating your XHTML
When you have changed your HTML, or have finished your new XHTML file, you should always throw it into the validator. In this case, the World Wide Web Consortium Validator, which is located here: http://validator.w3.org/
You enter the URL of your website in the form, and the validator will check your code for errors and mistakes you made, or just code you forgot. In the form 'Document type' you enter the used Doctype, which is one of the three Doctypes explained above. If, after this procedure, the validator congratulates you with your perfect XHTML page, you can put the Valid XHTML logo on your web-page, and you have your own created XHTML valid web-page!

top

Changelog:

License: