Every web page you visit is likely to have invisible HTML and XHTML code that helps browsers to display that page. Writing that code to create a web page is the subject of this web page. The following shows an example of creating an XHTML document:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document Title</title>
</head>
<body>
Some content to display on a web page.
</body>
</html>

Now let’s review the code shown above. The first line (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) simply specifies that we are using the transitional (also known as loose) DTD. Next, for the XML namespace, we are instructing the browser to reference the XML schema found on W3’s website:http://www.w3.org/1999/xhtml. For most of the XHTML documents you create, the first two lines (consisting of the DTD and XML schema) will remain the same while other parts of the documents are likely to change. Specifically, you would change the information in the header section (meta tags, title tag, etc.), and in the body section of a document.

In the header section, we have two tags: <meta> and <title>. With the <meta> tag, we are using the default character coding: iso-8859-1. This standard simply instructs the browser that we are to display characters on the webpage using the “Western” or “West European” alphabet. The <title> tag simply instructs the browser to display the text “Document Title” inside the title bar of the browser.

In the body section of our XHTML document, we only have one line to display: Some content to display on a web page.

You may be wondering how can you distinguish between the header section and the body section of the XHTML document. Look closely in our example above, when we start the header section, we use the <head> tag. This opening tag instructs the browser that the coming elements should be treated as header information for an XHTML document. As soon as the browser encounters the </head> tag, this ends the header section. Here is some terminology to keep note of: an opening tag starts an instruction and a closing tag stops the instruction. To create a closing tag, simply place a forward slash (/) between the first angled bracket (<) and the name of the tag; such as </a>, </b>, and </i>.

The simple answer is anything you place inside the <head> and </head> tag is treated as the header section of an XHTML document.

So how do we begin the body section of our XHTML document? If you answered with the <body> tag, you are correct. So any information you want to display on a webpage should be included in the <body> and </body> tags. You can also think of this as that the body section of an XHTML document begins with the <body> tag and the body section ends with the </body> tag.

The following shows the output of our example:

Output showing the content of the title bar and body section of the browser.

Output showing the content of the title bar and body section of the browser.

 

Validating XHTML documents

If you want to know whether or not your XHTML document is valid, you can go to http://validator.w3.org/. To validate the example shown above, use the following URL: http://www.scriptingmaster.com/xhtml/xhtml-document-ex1.htm. Or, click here to validate this document.

The validation of XHTML documents requires one of three XHTML DTDs (strict, transitional, or frameset) and the following main requirements:

  • A document type declaration (DOCTYPE) must appear in the document prior to the root element.
  • The root element of the document must be <html>.
  • The root element of the document (<html>) must designate an XHTML namespace using the xlmns attribute.
  • Ensure that <head> and <body> tags are present.
  • Make element and attribute names lowercase.
  • Assign values to attributes.
  • Enclose attribute values in quotation marks.
  • Ensure non-empty elements have closing tags.