Part 3 - Attributes
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.
As with XHTML tags, the attributes for them must be in lowercase. This means that, although in the past, code like:
would have worked, this must now be given as:
Although this is quite a minor issue, it is important to check your code for this mistake as it is quite a common one.
Another change in the HTML syntax is that all attributes in XHTML must be quoted. In HTML you could have used the following:
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:
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:
part which is incorrect. In XHTML all shortened attributes must be given in their 'long' format. For example:
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.
<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" />
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 David Gowans