Dan's XHTML-CSS Tutorial : Walkthrough : Page 2

Standardizing the Page

[back to 'Writing HTML and XHTML' - skip to 'Adding and Tagging Content']

We want our page to be XHTML 1.0, which is close to the cutting edge in web page technology (XHTML 1.1 does exist, but it doesn't add much), so we have to tell the browsers that's what we'll be writing. To do that, we add a doctype to the top of our page, which looks like this:

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

The first part of that tells the browser that we're using the strict form of XHTML 1.0, and the second tells anyone who cares where they can get the DTD--document type declaration--for that version of XTHML. You can download it and read it for yourself; it's written in XML it looks like, but you can still use it to see what tags and attributes are allowed in XHTML 1.0 (though there are also much easier ways to get that information).

(There are other doctypes you can use: XHTML 1.0 transitional has its own, as do HTML 4.01 transitional, strict and frameset and older forms like HTML 4.0, 3.2 and 2.0. For now, though, we won't worry about those substandard versions.)

Next, we need to tell the browser what sort of XML we're using--because, dear reader, XHTML is not only a sort of HTML, it's also a sort of XML. We do that by adding information to our <html> tag, as follows:

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

The first part there tells the browser what XML namespace (xmlns) we're using, the second tells it that our XML is written in English, and the third that so is our non-XML content. Of course, if you were writing in another language you'd have to change one or both of those 'en's to something else; but I'll leave it to you to look up the proper abbreviation in that case.

Ideally, we should also preface our page with an XML prologue, which ought to come before even the doctype. If we were to to that, the prologue for this page would look like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

Unfortunately, most browsers don't know what to do with the <?xml> declaration; for example, it sends IE6/Win into quirks mode, which is hardly what we want when we're writing a standards-compliant page. Even worse, some browsers go so far as to crash when they encounter <?xml>, so, all things considered, we're better leaving it out. For now, anyways, until the folks writing the browsers get their act together. Luckily, there are alternate ways to tell the browser all the information that should have appeared in the XML prologue: we've already told it that we're using XHTML 1.0 in the doctype, and we can stick the encoding information (which tells the browser which character set to use) in a meta tag in our document head, like this:

<meta http-equiv="Content-Type" content="text-html; charset=ISO-8859-1" />

What that does is tell the browser, first, that it's about to learn what our page's content-type is, and that that the content is text, tagged with HTML and encoded in ISO-8859-1. Trust me, that's what we want it to think. (Don't forget the trailing slash at the end of this tag; it's essential when we're writing XHTML, for reasons which will be explained shortly.)

Stick all those bits into your index.html, which should then look like this:

<!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" xml:lang="en" lang="en"> <head> <title>beautiful AND standards-compliant</title> <meta http-equiv="Content-Type" content="text-html; charset=ISO-8859-1" /> </head> <body> Look ma, I made this page all by myself! </body> </html> view result

Now at least the second half of our title is true. What remains is to accomplish the first part; and that takes a bit more work!

[ back to 'Writing HTML and XHTML' - on to 'Adding and Tagging Content']