XHTML Tutorial

Web programming topics
Post Reply
User avatar
Shane
Captain
Captain
Posts: 226
Joined: Sun Jul 19, 2009 9:59 pm
Location: Jönköping, Sweden

XHTML Tutorial

Post by Shane » Sat Oct 03, 2009 3:58 am

Part 1 - Introduction

Introduction
Although many people have never heard of it, XHTML is really the future of the internet. It is the newest generation of HTML (coming after HTML 4) but has many new features which mean that it is, in some ways, like XML. In this tutorial I will explain how XHTML differs from HTML and how you can update your pages to support it.

Note: It is necessary to already have a basic understanding of HTML before reading this tutorial as it deals with the differences between XHTML and HTML.

What is XHTML
XHTML stands for eXtensable HyperText Markup Language and is a cross between HTML and XML. XHTML was created for two main reasons:
  1. To create a stricter standard for making web pages, reducing incompatibilities between browsers
  2. To create a standard that can be used on a variety of different devices without changes
The great thing about XHTML, though, is that it is almost the same as HTML, although it is much more important that you create your code correctly. You cannot make badly formed code to be XHTML compatible. Unlike with HTML (where simple errors (like missing out a closing tag) are ignored by the browser), XHTML code must be exactly how it is specified to be. This is due to the fact that browsers in handheld devices etc. don't have the power to show badly formatted pages so XHTML makes sure that the code is correct so that it can be used on any type of browser.

XHTML is a web standard which has been agreed by the W3C and, as it is backwards compatible, you can start using it in your webpages now. Also, even if you don't think its really necessary to update to XHTML yet, there are three very good reasons to do so:
  1. It will help you to create better formatted code on your site
  2. It will make your site more accessible (both in the future and now due to the fact that it will also mean you have correct HTML and most browsers will show your page better)
  3. XHTML is planned to replace HTML 4 in the future
There is really no excuse not to start writing your web pages using XHTML as it is so easy to pick up and will bring many benefits to your site.

The Main Changes
There are several main changes in XHTML from HTML:
  • All tags must be in lower case
  • All documents must have a doctype
  • All documents must be properly formed
  • All tags must be closed
  • All attributes must be added properly
  • The name attribute has changed
  • Attributes cannot be shortened
  • All tags must be properly nested
At a glance, this seems like a huge amount of changes but once you start checking though the list you will find that very little on your site actually needs to be changed. In this tutorial I will go though each of these changes explaining exactly what is different.

The Doctype
The first change which will appear on your page is the Doctype. When using HTML it is considered good practice to add a Doctype to the beginning of the page like this.

Although this was optional in HTML, XHTML requires you to add a Doctype. There are three available for use.

Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document. This is best used if you are using Cascading Style Sheets for presentation.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional - This should be used if you want to use presentational features of HTML in your page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset - This should be used if you want to have frames on your page.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The doctype should be the very first line of your document and should be the only thing on that line. You don't need to worry about this confusing older browsers because the Doctype is actually a comment tag. It is used to find out the code which the page is written in, but only by browsers/validators which support it, so this will cause no problems.

Document Formation
After the Doctype line, the actual XHTML content can be placed. As with HTML, XHTML has <html> <head> <title> and <body> tags but, unlike with HTML, they must all be included in a valid XHTML document. The correct setup of your file is as follows:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>Page Title</title>
OTHER HEAD DATA
</head>
<body>
CONTENT
</body>
</html>
It is important that your document follows this basic pattern. This example uses the transitional Doctype but you can use either of the others (although frames pages are not structured in the same way).

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:

Code: Select all

<FONT>
<Font>
<FoNT>
are all incorrect tags and must not be used. The font tag must now be used as follows:

Code: Select all

<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:

Code: Select all

<lowercase>
and also that Case For Attributes is set to:

Code: Select all

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:

Code: Select all

<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:

Code: Select all

<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:

Code: Select all

<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.

Code: Select all

<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:

Code: Select all

<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:

Code: Select all

<img src="myimage.gif" alt="My Image" width="400" height="300" />
Again, notice the space before the />

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:

Code: Select all

<table Width="100%">
would have worked, this must now be given as:

Code: Select all

<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:

Code: Select all

<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:

Code: Select all

<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:

Code: Select all

<input type="checkbox" value="yes" name="agree" checked>
In this, it is the:

Code: Select all

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

Code: Select all

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

Code: Select all

<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:

Code: Select all

<img src="myimage.gif" name="my_image">
would need to be written in XHTML as:

Code: Select all

<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):

Code: Select all

<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.
Top
Post Reply

Return to “Web programming”