Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
W3Schools XHTML
More XHTML Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem
Home : Tutorials : XHTML : Part 2

XHTML Tutorial
Part 2 - XHTML Tags

Introduction

One of the major changes to HTML which was introduced to XHTML is that tags must always be properly formed. With the old HTML specification you could be very sloppy in your coding, with missing tags and incorrect formation without many problems but in XHTML this is very important.

Lower Case

Probably the biggest changes in XHTML is that now not only the tags you use but, the way in which you write them must be correct. Luckily the major change can be easily implemented into a normal HTML document without much problem.

In XHTML, tags must always be lower case. This means that:

<FONT>
<Font>
<FoNT>

are all incorrect tags and must not be used. The font tag must now be used as follows:

<font>

If you are not writing your code, but instead use a WYSIWYG editor, you can still begin to migrate your documents to XHTML by setting the editor to output all code in lower case. For example, in Dreamweaver 4 you can do this by going to:

Edit -> Preferences -> Code Format

and making sure that Case For Tags is set to:

<lowercase>

and also that Case For Attributes is set to:

lowercase="value"

Nesting

The second change to the HTML tags in XHTML is that they must all be properly nested. This means that if you have multiple tags applying to something on your page you must make sure you open and close them in the correct order. For example if you have some bold red text in a paragraph, the correct nesting would be one of the following:

<p><b><font color="#FF0000">Your Text</font></b></p>
<b><p><font color="#FF0000">Your Text</font></p></b>
<p><font color="#FF0000"><b>Your Text<b></font></p>

These are only examples, though, and there are other possibilities for these tags. What you must not do, though, is to close tags in the wrong order, for example:

<p><b><font color="#FF0000">Your Text</p></font></b>

Although code in this form would be shown correctly using HTML, this is incorrect in the XHTML specification and you must be very careful to nest your tags correctly.

Closing Tags

The previous two changes to HTML should not be a particular problem to you if your HTML code is already well formed. The final change to HTML tags probably will require quite a lot of changes to your HTML documents to make them XHTML compliant.

All tags in XHTML must be closed. Most tags in HTML are already closed (for example <p></p>, <font></font>, <b></b>) but there are several which are standalone tags which do not get closed. The main three are:

<br>
<img>
<hr>

There are two ways in which you can deal with the change in specification. The first way is quite obvious if you know HTML. You can just add a closing tag to each one, e.g.

<br></br>
<img></img>
<hr></hr>

Although you must be careful that you do not accidentally place anything between the opening and closing tags as this would be incorrect coding. The second way is slightly different but will be familiar to anyone who has written WML. You can include the closing in the actual tag:

<br />
<img />
<hr />

This is probably the best way to close your tags, as it is the recommended way by the W3C who set the XHTML standard. You should notice that, in these examples, there is a space before the />. This is not actually necessary in the XHTML specification (you could have <br/>) but the reason why I have included it is that, as well as being correct XHTML, it will also make the tag compatible with past browsers. As every other XHTML change is backwards compatible, it would not be very good to have a simple missed out space causing problems with site compatibility.

In case you are wonder
ing how the <img> tag works if it has all the normal attributes included, here is an example:

<img src="myimage.gif" alt="My Image" width="400" height="300" />

Again, notice the space before the />

Part 3

In part 3 I will show you the changes to the attributes of HTML tags and also the other small changes which have been made.

© 1999 - 2001 FreeWebmasterHelp.com