XHTML 1.0 Tutorial Part I

In this lesson we will be looking at...

Introduction to XHTML™ | Creating XHTML™ documents | Structure of XHTML™ documents | XHTML™ syntax

Introduction to XHTML

XHTML™ is a relatively new language which has replaced HTML as the primary way to describe web content. XHTML™ allows the author to separate structure from formatting. HTML was at a disadvantage in this respect, as numerous tags (which were used to format text) resulted in pages which had very messy source code and were hard to maintain and update. In this tutorial, we will be looking at how to create web documents in XHTML™ 1.0, which uses XML's strict syntax, to create well formed web pages.

Creating XHTML documents

XHTML documents can be written on any text editor, such as KEdit and Notepad, and saved as a .htm or .html file (I always use .html out of personal preference - but it makes no difference really).

You can also use WYSIWYG (what you see is what you get) editors (such as Frontpage) that let you compose your web page as if it were a word processing document, and generate the source code all for you. I find myself that, although useful for beginners (I used HoTMetaL Pro for a short while at the beginning), they generate terribly messy code, with superfluous tags all over the place, and quite simply aren't worth the effort (and most do all the coding in HTML, not XHTML).

Then there's the in-between, which are specialist text editors, designed for XHTML markup. These include such ones as Arachnophilia, TextPad and emacs. Currently, I am using HTML-Kit, which can be downloaded for free, and has support for HTML, XHTML, JavaScript and server-side languages such as PHP. The choice is, of course up to you; choose whatever you feel is easiest. For the course of this tutorial, it's best to use a text-editor, or you can use the built in script at the end of each section.

Okay, now that we've got the nitty gritty out of the way, let's start with a look at how XHTML documents are formed...

Basic structure of an XHTML document

XHTML documents take the following format:

    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
    <html xmlns="http://www.w3.org/1999/xhtml">
 
     <head>
        Header information here
     </head>
     <body>
         All content to be written here
     </body>
 
    </html>

Lines 1-3 declare that the page is written in XHTML. It is not necessary to understand exactly what these lines mean. However, it is important to place these three lines at the beginning of all XHTML documents that you create in order for web browsers to understand that the document is XHTML 1.0 strict and for the page to be syntactically valid. If using legacy HTML tags or attributes, make sure to change lines 2-3 to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(transitional means that you are still using some HTML tags (i.e. a transition between HTML and XHTML.)

The XHTML content starts at line 5:

<html xmlns="http://www.w3.org/1999/xhtml">

with the <html> tag. xmlns="http://www.w3.org/1999/xhtml" is another attribute required for the coding to be valid. Again, it's not necessary to know what it means. Simply copy and paste the first 5 lines into the beginning of all your XHTML documents. (If you're really curious, xmlns stands for XML name space - this derives from the eXtensible Markup Language, XML)

Head and body tags

The <head> tag is where your document information goes. For now, the only information we will put in the head tag is the page title, with the following syntax:

<title>Your page name here</title>

So place this text between the head tags, like this:

<head> <title>My Cool Webpage</title> </head>

This is the title that will appear in the title bar of your browser, and is also the name used when a user bookmarks your page.

The <body> section is where your actual page content goes i.e. the text, images etc.

Syntax

XHTML documents consist of tags and content. All content must be enclosed within a pair of tags. So, if you want to write some text, you would enclose the text within paragraph tags i.e. Your paragraph text here.

Some tags also have attributes, such as Your funky text here, where class is the attribute, and special is the class attribute's value.

In order for a document to be valid XHTML, there are a few rules that need to be followed. Don't worry if they don't make much sense right now, it'll become clearer when you go on to develop your pages.

Unlike HTML, all attributes must be enclosed in either single quotes ['] or double quotes ["].
All tags and attributes must be lower case. Writing them in upper case (as was popular with HTML) is a syntax error.
The <comment> tag has been replaced with .
Overlapping tags is a syntax error and may cause the page to load incorrectly. eg.
<head> <title>My first page</head> </title>
ALL tags must have an end tag. The HTML practice of leaving empty tags (i.e. ) without closing them (i.e. ) is syntactically wrong.