Beginning XHTML

A Basic XHTML Page

This chapter will introduce the basic structure of an XHTML document.

XHTML Document Structure

An XHTML document has a very simple structure. It has a header, which contains information about the document, and a body, which contains the main content of the document. To markup this structure, you need three tags - <html>, <head>, and <body>. Each is recognized as such by your browser by the tagname being enclosed in < > symbols. For example, when the browser sees the <head> tag in the XHTML source, it will recognize that the information following that tag is part of the header information. So at this point, we know that our XHTML document must contain at least the following:

<html>
<head>
<body>

Notice that the tagnames are all entered in lowercase letters. That is because XHTML is case sensitive, and all of the tags have been defined as lower case. For example, <HTML> and <Html> would not be recognized as valid XHTML tags, only <html> will work. This doesn't render references such as the Web Design Group's useless -- just remember to enter the tagnames in lower case and you are fine.

Returning to our document, we have specified the existence of the three elements, html, head and body. However, each of these elements has a concrete beginning and end. For XHTML, you must mark the end of each element by using a closing tag. Closing tags are in the format of </tagname>. So the closing tags we will need for what we have so far are </html>, </head> and <body>.

The html tag is the root element, and all elements must be contained within that root element. Knowing that, we want to put the closing tag for html at the bottom of the document, so that the head and body tags are contained within it.

<html>
<head>
<body>
</html>

We need to mark the ends of the head element and the body element as well. Since the header information is not part of the body contents, we need to close it before the body tag. Also, since the body is contained within the XHTML document, it must be closed before closing the html root element. So we end up with:

<html>
<head></head>
<body></body>
</html>

Looking at this markup, even though there has been no content added, the basic structure has been specified. However, there are two more things that are needed to make this a valid XHTML document. First, every XHTML document must have a title. Second, every XHTML document needs a declaration to identify it as an XHTML document.

The document title is specified using the title tag, which belongs in the header information. Therefore, we want to put the title elements within the <head> and </head> beginning and closing tags. Since our page will be on the solar system, we can add the title like this:

<html>
<head>
  <title>The Solar System</title>
</head>
<body></body>
</html>

The spaces before the title tag are not required, however I added them to make it visually apparent that the title element is enclosed within the head element. The line breaks are not required either, but imagine working with something like this:

<html><head><title>The Solar System</title></head><body></body></html>

That may not look too bad since we only have a few tags, but once you have a document with numerous elements, having them all strung together would make it extremely difficult to see and identify the different elements. A single space, multiple spaces and line breaks are all interpreted as a single space, so it is good practice to use spaces, indentation and line breaks to enhance the readability of your XHTML documents.

The last item we need to add is the XHTML document declaration. This is a special type of command, and must be included before the root element of the document, html. The document declaration looks like this:

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

There's alot of information here. Broken down, !DOCTYPE is what defines this line as a document type declaration. The name of the root element of the document, html, immediately follows. The remainder of the line specifies the level of access(PUBLIC), the owner (W3C), type of definition (DTD), the text description of the document definition (XHTML 1.0 Strict), the language (EN, for English), and finally the URL location of the Document Type Definition (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd).

Whew! That's a lot of info. Luckily all we have to do is cut and paste this line into the top of our XHTML source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>The Solar System</title>
</head>
<body></body>
</html>

Now we have a valid XHTML file. And in creating this file, we have covered some of the rules that must be followed for XHTML:

Tagnames must be specified in lower case
An XHTML document must be well-formed - Your document is well-formed by applying these:
- The root element of an XHTML document is html.
- XHTML elements must be closed
- XHTML elements must be properly nested - Properly nested means that an element contained within another element, such as title within the head element, must be closed before the containing element is closed.
An XHTML document requires at minimum the html, head, title and body tags.
The document must contain a !DOCTYPE declaration for XHTML

The file extension xhtml is recognized by some browsers, but others simply do not know what to do with that file type. So for compatibility, it is best to name your XHTML source documents with the html or htm extension.

At this point, save your XHTML document file and bring it up in a browser. The filename extension should be either html or htm. I saved mine as solarsys0.html. For most browsers, you can view an XHTML file stored on your hard drive by using the File - Open option and browsing to your file to open it for viewing.

When viewing solarsys0.html in the browser, I don't think many will be impressed by the blank screen when looking for information on the solar system. Obviously it needs more work. However, we've made a start, and we can add to our XHTML document skeleton to provide meaningful content.

Next chapter - Basic Tags (Headers, Paragraphs and Lists)