Bree

<strong>Introduction:</strong>

<strong>What XHTML Is:</strong>

XHTML is an XML application designed to create a more formal markup language for use on the internet. XHTML Is representative of eXtensible HyperText Markup Language. It is almost the same as HTML 4.01, with a number of XML formatting and usage rules introduced. XHTML 1.0 was introduced as an official W3C standard.

<strong>About XHTML:</strong>

XHTML is designed to improve the compatibility, proprietary tags, and cross browser issues of HTML. It is a stricter, cleaner markup language, though the differences are minimal. If you know and use HTML, learning XHTML is remarkably easy.

The last version of HTML (4.01) has been superseded by XHTML 1.0. In the future, all web publishing is going to be dependant on XHTML, as HTML is no longer being developed.

While XHTML improves on HTML, it is also backwards compatible. Nearly all browsers will correctly parse XHTML in webpages. Future versions of browsers will eventually drop support for HTML coding, so it's recommended that you try to use XHTML exclusively to make sure your pages will work in future versions of browsers. Do you want to be upgrading thousands of badly coded pages when the next generation of browsers stop supporting flawed HTML tags ?

In it's strict implementation, XHTML is a way to structure your web publishing. All presentational elements of HTML (For example: color="red" type attributes) are defunct in XHTML. Presentation should be achieved through use of CSS, which is much more useful anyhow. The previous example would then be style="color: red" in a strict XHTML page.

If you don't want to code in strict XHTML, there is also "transitional" XHTML, in which you can use the presentational elements of HTML in your pages. There is also a frames declaration for pages on which you use frames. Find out more in the 'doctype' section.

<strong>Outline:</strong>

This tutorial provides an insight into the development of XHTML, as well as information regarding the use, development, and current status of the language. Maybe the most important section however is the syntax information and examples, which will help you correct your pages to be XHTML compliant.

<strong>Why Use XHTML ?</strong>

<strong>Compatibility:</strong>

When HTML was developed, no one could have predicted the massive growth of the internet. Over the years, the internet has gained such popularity that the internet is not strictly accessed through a computer. Mobile Phones, PDA's, WebTV, Games Consoles, even Fridges have been developed to provide access the web.

With very small processing power available to some of these devices, they can't correct web coding mistakes in the way that popular browsers do on home PC's. If you run a website, then it's in your interest to 'upgrade' to XHTML. It ensures that you have compatible, standard code to ensure your pages load correctly on the largest number of devices.

As more and more people access the web though these devices, and browsers update to provide more support for XHTML, bad coding habits now will lead to a lot of patching in the future. By coding correctly now, you eliminate that future need.

<strong>XHTML Syntax:</strong>

This is where the most apparent changes from HTML are noticed. The XHTML code that I have used as examples here are varied, but I'm sure I haven't covered every possibility. If you have a particular query, I've found that the only way to be sure is to do a web search for "XHTML compatible" and the tag you need to find out about.

The most important syntax in XHTML is based on good syntax of HTML. The focus is on correctly formed pages, that use only approved tags and attributes, use a correct doctype declaration, and have lowercase, closed, nested tags.

<strong>Doctype (DTD):</strong>

Possibly the most important tag on the page, the Document Type declaration is what identifies an XHTML document to the browser. There are three different doctypes depending on what level of XHTML code you're using. Doctypes were available in HTML, but were at that time optional. This 'doctype' is known more formally as 'DTD' or 'Document Type Declaration'

The Doctype declaration must be the very first line of your document, before even the opening HTML tag. Older browsers interperet the declaration as a comment, and ignore it, while newer ones determine the use of the pages XHTML code by the doctype. For that reason it's important to choose the correct declaration for your document.

The Strict declaration is used for pages which are totally XHTML compatible. Transitional documents are those which rely on some of the presentational elements of HTML, while adhering to XHTML syntax. Frameset pages are those which contain frames. The browser can then use the doctype of each individual page in the frames to parse them correctly.

The actual tags are as follows:

XHTML 1.0 Strict:
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

XHTML 1.0 Transitional:
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

XHTML 1.0 Frames:
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

XHTML 1.1 Standard
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

The last tag, XHTML 1.1, is designed for use with XHTML 1.1 which uses modules to improve upon XHTML 1.1. I've decided not to cover such advanced modules in this tutorial.

<em>Tags:</em>

Tags are the core of any XHTML page. Correct XHTML tags are formed adhering to the following rules:

<em>Lower Case:</em>

All tags must be presented in lowercase. For example: use &lt;html&gt; not &lt;HTML&gt;

<em>Closed:</em>

All tags must be closed. For every opening tag, you must use a closing tag after the contents of that tag. For example: a &lt;/p&gt; after every paragraph opened with a &lt;p&gt;. The pair of tags around every piece of content is sometimes not possible, like for the &lt;br&gt; tag, which has no closing tag. In this scenario, you must add a closing space then forward slash inside the tag. For example: use &lt;br /&gt; not &lt;br&gt;.

This rule applies for a number of common tags such as the image tag: &lt;img src="file.gif" /&gt;, line beak: &lt;br /&gt;, horizontal rule &lt;hr /&gt;, and others.

<em>Nested:</em>

As in correct HTML, all tags must be nested correctly. Tags that are not nested may not be displayed, or be displayed incorrectly. Incorrectly nested tags are those which open inside another tag, but do not close inside the container tag. For example: &lt;b&gt;&lt;i&gt;contents&lt;/i&gt;&lt;/b&gt; Is correct because the italic tag is opened and closed entirely inside the bold tag. Incorrect nesting would be: &lt;b&gt;&lt;i&gt;contents&lt;/b&gt;&lt;/i&gt;, where the tags overlap.

<em>Attribute Quoting:</em>

All attributes defined within a tag must have quotation marks surrounding the values. For example: &lt;img src="file.gif" /&gt; is correct, whereas &lt;img src=file.gif /&gt; is not.

<em>Minimising Attributes:</em>

All attributes of a tag must be defined correctly. Some attributes in HTML worked whether used correctly or not. Only using the full tag will work in XHTML. For example: &lt;option selected="true"&gt; is correct, &lt;option selected&gt; is not.

<em>Special Markup Characters and Cdata:</em>

Markup characters such as the "&lt;" are used in XHTML specifically. To use them in other ways such as scripts, you must define them as cdata. The correct way to insert a script into your page, for example, would be as follows:

&lt;![CDATA[

Script information goes here.

]]&gt;
&lt;/script&gt;

<em>Name and ID Attributes:</em>

The HTML "ID" attribute has been replaced by the "name" attribute. For example: &lt;p ID="IDName"&gt; should now be written as &lt;p name="IDName"&gt;.

<em>Correctly Formed:</em>

Page Structure is extremely important in XHTML documents. Like well coded HTML, a document has to have all the page elements such as a header and body section, as well as opening and closing html tags. In particular, the html, head, title, body, and their appropriate closing tags are all mandatory. A very simple document would be coded as follows:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Title Goes Here&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Main document - First paragraph&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;


Notice the XHTML Document Type definition, or DTD tag. The "xmlns=" tag should also be noted, as it is required in all XHTML documents.

<strong>Using CSS:</strong>

Because using XHTML means that you can't use HTML's simple presentation attributes, CSS is vital to provide the colour, sizing, placing, and various other display elements. It's beyond the scope of an XHTML tutorial to provide that information however, so you'll have to find a little more out on your own. I'll eventually be writing up a CSS guide of a similar nature to this one.

<strong>Validation:</strong>

When using XHTML, it's wise to validate your pages to make sure you haven't made any simple errors that prevent the page from being displayed correctly. In modern browsers, software often corrected mistakes made in HTML code. Using XHTML correctly means that such mistakes can't exist. Check your pages using the W3C XHTML Validator.

If your XHTML document has errors, it will provide links to the correct information. It's important to check all your pages till you're certain of what you're doing.

<strong>Links:</strong>

<strong>XHTML Tutorials:</strong>

http://www.w3schools.com/xhtml/
http://www.freewebmasterhelp.com/tutorials/xhtml
http://www.juicystudio.com/tutorial/xhtml/index.asp
http://www.thescarms.com/XML/XHTMLTutorial.asp

My Details:

Questions, Comments, and Corrections are all appreciated. Contact me via:


ICQ: 238143054
Email: gibbonet@punkass.com

Or Yahoo & MSN messengers at request.