Creating an XHTML Page

The basic "Hello World!" web page that we looked at in the previous page is reproduced below. It is fair to say that, although the coding shown is essentially correct, the file we created could not be validated against an existing standard, because we have not declared it to be of a specific document type. What we want to achieve here is to amend the code as shown so that it would be accepted as a well-formed (standards compliant) XHTML document.


<html>
  <head>
    <title>My First Web Page</title>
  </head>

  <body>
    Hello World!
  </body>
</html>


Before proceeding, it is worth mentioning that XHTML documents may be declared as conforming to a specific version of XHTML. Currently, most XHTML documents are declared as conforming to version 1.0 (version 2.0 is currently in the pipeline, but is still some way off). The document type definition (DTD) used will depend on the degree to which the document is expected to comply with the XHTML 1.0 standard. Compliance is classed as strict (i.e. the standard is strictly complied with), transitional (presentational markup elements of HTML may be used) or frameset (allows the use of frames within web documents). W3C discourage the use of both frames and presentational markup within web documents. For the purposes of these pages, therefore, we will be using only the strict DTD. The following code is an amended version of index.html (amend the index.html file accordingly, and save your changes):


<!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>My First XHTML Page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  </head>

  <body>
    <p>
      Hello World!
    </p>
  </body>
</html>


The browser output for this file is shown below. Note that the output is virtually identical to that produced by the original "Hello World!" page.


The browser output for a basic "Hello World!" XHTML document

The browser output for a basic "Hello World!" XHTML document


Comparison of the coding for the two documents reveals that the main changes made include the addition of a document type declaration at the top of the document (shown below). The document type declaration we will use from this point forward will always be as shown here.


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


Another significant change is the inclusion within the <html> opening tag of a reference to the XHTML namespace and language used:


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


The last major change is the inclusion of a meta tag within the document header that specifies the content type and character set used:


<meta http-equiv="content-type" content="text/html; charset=utf-8"/>


Notice the use of the solidus (forward slash) at the end of the <meta> tag. In XHTML, all tags must be closed. If the tag is one of the so-called "empty" tags (i.e. there is not normally a separate closing tag as such), the solidus is inserted before the closing angle bracket to indicate that the tag is closed. The only other difference between the two files is that the text "Hello World!" is now enclosed within the opening and closing paragraph tag set <p> . . . </p>. This is required because, with XHTML, all content must be enclosed within appropriate tags. We can now attempt to validate the document (as valid XHTML) using the following steps:

All being well, you should see a screen similar to that shown below.


The result of invoking the W3C validator

The result of invoking the W3C validator