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

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 1

XHTML Tutorial
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 (comming 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 accessable (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.

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

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

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

In part 2 I will explain further about the changes to how HTML tags are written.

© 1999 - 2001 David Gowans