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 3

XHTML Tutorial
Part 3 - Attributes

Introduction

In this part of the XHTML tutorial, I will show you the changes to HTML attributes in XHTML. HTML attributes are the extra parts you can add onto tags (such as src in the img tag) to change the way in which they are shown. There are four changes to the way in which attributes are changed.

Lowercase

As with XHTML tags, the attributes for them must be in lowercase. This means that, although in the past, code like:

<table Width="100%">

would have worked, this must now be given as:

<table width="100%">

Although this is quite a minor issue, it is important to check your code for this mistake as it is quite a common one.

Correct Quotation

Another change in the HTML syntax is that all attributes in XHTML must be quoted. In HTML you could have used the following:

<table width=100%>

with absolutely no compatibility problems. This all changes in XHTML. If you use code in this format with XHTML it will be incorrect and must be changed. In future, all attributes must be surrounded by quotes (") so the correct format of this code would be:

<table width="100%">

Attribute Shortening

It has become common practice in HTML to shorten a few of the attributes to save on typing and on transfer times. This method has become almost a standard. As with other common practices in HTML, this has been removed from the XHTML specification as it causes incompatibilities between browsers and other devices.

An example of a commonly shortened tag is:

<input type="checkbox" value="yes" name="agree" checked>

In this, it is the:

checked

part which is incorrect. In XHTML all shortened attributes must be given in their 'long' format. For example:

checked="checked"

so the checkbox code earlier would now need to be written as:

<input type="checkbox" value="yes" name="agree" checked="checked">

There are other attributes (such as noresize) which also must be given in full. There is a full list at W3Schools.

The ID Attribute

Probably the biggest change from HTML to XHTML is the one tag attribute change. All other differences have been just making tags more compatible. This is the only full change.

In HTML, the <img> tag has an attribute 'name'. This is usually used to refer to the image in javascript for doing actions like image rollovers. This attribute has now been changed to the 'id' attribute. So, the HTML code:

<img src="myimage.gif" name="my_image">

would need to be written in XHTML as:

<img src="myimage.gif" id="my_image" />

Of course, this would not be backward compatible with older browsers, so if you still want your site to work fully in all old browsers (as XHTML is intended to do), you will need to include both id and name attributes (this would also be correct XHTML):

<img src="myimage.gif" id="my_image" name="my_image" />

Conclusion

This tutorial has shown you most of the changes between HTML and XHTML. As you will have seen, there are actually very few changes and, the next time you update your site, I recommend changing your code to make it XHTML compatible. It will not only make your site 'future-proof' but will also mean that you will have more correct code and should have fewer browser incompatibility problems.

© 1999 - 2001 FreeWebmasterHelp.com