EchoEcho.Com : D-Zine : XHTML

XHTML - D-Zine Volume 11 :

XHTML Syntax

Below are the main characteristics of XHTML syntax:

1 - Code must be well formed

2 - Elements must be properly nested

3 - All tags must be closed

4 - All tags and attributes must be lowercase

5 - Attribute's values must be quoted

6 - Minimisation of attributes is not allowed

7 - The NAME attribute is replaced by ID

1 - Code must be well formed
Your code must be well formed for it to work. You will learn about how to create well formed XHTML in the coming stages of this article. It is important for your document to be valid. You will learn how to validate your code using the W3C Validator in the final chapter.

2 - Elements must be properly nested
XML Applications require that elements be properly nested. Below is an example of properly nested tags and improperly nested (overlapping) tags.

Invalid	Valid
<p><b><i>...</b></p></i>	<p><b><i>...</i></b></p>

Here is another exmaple:

Invalid	Valid
<html> <head> <body> </head> </body> </html>	<html> <head>...</head> <body>...</body> </html>

3 - All tags must be closed
Non-Empty elements must be closed with an end tag:

Invalid	Valid
<p>Paragraph text <ul> <li>... <li>... </ui>	<p>Paragraph text</p> <ul> <li>...</li> <li>...</li> </ul>

Notice how the Non-Empty elements were closed. This also applies to empty elements such as the <img> tag and the <br> tag. To close an empty tags, we put a forward slash before the closing bracket, like so:

Invalid	Valid
<img src="foo.png" alt=""> <hr> <br>	<img src="foo.png" alt=""/> <hr/> <br/>

NB: It is also important to note that for back-browser compatibility, it is also wise to leave a space in front of the "/", so that older browsers wont choke and say, "what's this? I can't understand this slash thingy here!" This is apparent for browsers that don't yet support XHTML.

This will result in the tags looking like:

You can also close some tags like <img> with </img>, but this causes problems with other browsers and is not recommended. This results in:

4 - All tags and attributes must be lowercase
This one is very straight forward and simple, elements and attribute's names must be written in lower case. This is because XML is case sensitive; <FOO> and <foo> are recognised as different tags in XML.

Invalid	Valid
<p CLASS="foo">...</P> <BR />	<p class="foo">...</p> <br />

5 - Attribute's values must be quoted
This one makes alot of sense and you should have already done this, even before XHTML. The values of attributes must be surrounded with quote marks.

Invalid	Valid
<table width=100% cellpadding=0>	<table width="100%" cellpadding="0">

Only a few more things in this short article, so don't stop now, you're on a roll...

6 - Minimisation of attributes is not allowed
In XML, attribute minimization is not permitted. All attributes must have a value like so:

Invalid	Valid
<frame noresize /> <input disabled />	<frame noresize="noresize" /> <input disabled="disabled" />

7 - The NAME attribute is replaced by ID
The "name" attribute used commonly with the <a>, <applet>, <frame>, <iframe>, <img> and <map> tags is no longer used and is replaced by the "id" attribute. The "name" attribute is still used for form and <meta> elements.

Invalid	Valid
<img src="foo.png" name="foo" alt="">	<img src="foo.png" id="foo" alt="" />

For older browsers, it would be wise to use both "name" and "id' together for back-browser compatibility like so:

I have been doing this for HTML 4.01 anyway for use with JavaScript's getElementById function, so it shouldn't be too much of an effort. Dreamweaver does this automatically as well.

<< PREVIOUS