Behind the Scenes with XHTML

By Lee Underwood

In a previous article, we quickly touched on the requirements for proper XHTML coding, especially in relation to HTML 4.01. In this article, we'll take a closer look at what some of those requirements are in relation to the head portion of the Web page. This is the portion of the document that the user agent (i.e., browser) will read first. It's important that it doesn't stumble here. Remember, our goal is to develop standards-based Web pages (here, I make the assumption that the reader has a working knowledge of HTML).

Let's start at the top of a valid XHTML document and work our way down. For this part of the discussion, I'll be referring to the code below.

<?xml version="1.0" encoding="UTF-8"?>

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

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

<head>

<title>Document Title Goes Here</title>

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

<link rel="stylesheet" type="text/css" media="screen" href="/style/core-style.css" />

</head>

Content Declaration

The first line shown above is the XML declaration. This line defines the version of XML you're using as well as the character coding. It's recommend by the World Wide Consortium (W3C) but is not required. If you're not using XML, it's not necessary. In fact, it can cause problems with some of the older browsers. Most of them will choke if they encounter a page that begins with this encoding. If you don't include the XML declaration, you'll need to include the meta tag below (also shown above, after the title tag). Do not include both.

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

If you're using Unicode, you'll need to use the following declaration instead:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

If the XML declaration is used, it must be the first line on the page. If the content meta tag is used, it must be placed within the head of the document.

The content meta tag is divided into two parts. The first part (content="text/html) tells the browser the mime type. Mime is short for "Multipurpose Internet Mail Extensions". It was originally used in formatting e-mail but is now also used by Web browsers to declare the type of content being served to the browser. The W3C actually recommends using application/xhtml+xml as the mime type for an XHTML document. However, there are problems with using it. An example is Internet Explorer (up to version 6 for both Windows and Mac), which doesn't recognize it, nor do many other browsers. Using text/html should make your page acceptable to IE and is "allowable" by the W3C. The second half of the meta statement (charset=UTF-8) identifies the character set used by the browser.

Note that the meta tag ends with a " />". This is because, in XHTML, all tags must be closed, except for the DOCTYPE statement. The meta tag is an empty element tag. This means the tag itself is the content or a place holder for the content. Empty element tags include <img /> and <br />. Since the tag has no additional content, it doesn't have an end tag and must be closed within itself. If you leave a space before the slash, older browsers won't get confused.

Document Type Definition

If the XML declaration isn't used, the first line in the document must be the Document Type Definition (DTD), or DOCTYPE. This statement is used to "set out the rules and regulations for using HTML in a succinct and definitive manner" (W3C). Failure to use a full DTD could send your visitor's browser into 'quirks' mode, causing it to behave like a version 4 browser (interestingly, a large number of Web pages do not use the doctype statement; many of them are Web development sites). There are three doctypes available for XHTML: strict, transitional, and frameset. Be careful as these declarations are case-sensitive.

The strict DTD is used for documents containing only clean, pure structural mark-up. In these documents, all the mark-up associated with the layout comes from Cascading Style Sheets (CSS).

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

The transitional DTD is used when your visitors may have older browsers which can't understand CSS too well. You can use many of HTML's presentational features with this DTD.

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

Finally, use the frameset DTD when you want to use HTML to partition the browser window into two or more frames.

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

The DTD files referenced above are plain text files. You can enter the URL and download them. There is nothing earth-shattering in the files but you'll be able to see what the browser is reading.

The XML Namespace

The next line in our document is the XML namespace. This statement identifies the primary namespace used throughout the document. An XML namespace "is a collection of names, identified by a URI reference, which are used in XML documents as element types and attribute names" (W3C). The html tag is included at the beginning, effectively combining the two tags. In addition, the language attribute is also included, in both XML (xml:lang="en") and HTML (lang="en") terms.

The Wrap-Up

The rest of the header shown is basic HTML code. The head tag opens the header and must be closed before the body tag. The title tag follows the opening header tag. Next, the meta tags and the link to the style sheet, if necessary, are included. Be sure to close the meta and style sheet link tags with " />". Remember, in XHTML, all tags and attributes must be lower case and all tags, except the DOCTYPE, must be closed.

The article "XHTML 1.0: Where XML and HTML meet" provides a further, in-depth study of transitioning to XHTML.

Helpful Links

This article originally appeared on WebReference.com.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •