Next / Previous / Contents / TCC Help System / NM Tech homepage

2. A small, complete example page

Here is a minimal XHTML Web page with nothing on it but a title, a major heading, one paragraph of text, and a bullet list with two bullets.

sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Your page title here</title>
  </head>
  <body>
    <h1>Your major heading here</h1>
    <p>
      This is a regular text paragraph.
    </p>
    <ul>
      <li>
        First bullet of a bullet list.
      </li>
      <li>
        This is the <em>second</em> bullet. 
      </li>
    </ul>
  </body>
</html>

XHTML is a “document type” of XML, so it obeys certain structural rules; see Section 3, “Rules for the XML notation” for the complete rules. For the moment, all you need to know is that you use tags to structure a page. Tags always start with a less-than symbol (“<”) and end with a greater-than symbol (“>”).

Here is a line-by-line explanation of the example above.

<!DOCTYPE html …>

To declare that your page is written in XHTML 1.1, include this special “document type identifier” as the first lines of your file.

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

This is the start tag for the entire page. It has two attributes. The xmlns attribute specifies that this page is written in XHTML. The xml:lang attribute states that the language of the page is English.

Why, you might ask, are there two different methods for identifying the page as XHTML, once in the DOCTYPE identifier, and once in this xmlns attribute? The former method is the old way, and the latter is a newer, better way to declare the document type. For full validity in old and new tool environments, use both.

<head>

The page is divided into two regions, the head and the body. This is the start tag for the head section.

<title>Your page title here</title>

This line titles the page. Browsers will display the text “Your page title here” in the border around the browser window, not anywhere on the page.

</head>

The end tag terminating the head section of the page.

<body>

The start tag for the body section of the page.

<h1>Your major heading here</h1>

The h1 element specifies a level-one heading, that is, the largest level of heading. This displays the text “Your major heading here” as a heading in large type.

<p>

A start tag that indicates the start of a normal text paragraph.

This is a regular text paragraph.

Content of the text paragraph.

</p>

Shows where the paragraph ends.

<ul>

This start tag begins a bullet list; “ul” stands for “unnumbered list”.

<li>

Starts a new “bullet” paragraph in the bullet list; “li” stands for “list item.”

First bullet of a bullet list.

Text of the first bulleted paragraph.

</li>

End tag for the first bullet.

<li>

Start tag for the second bullet.

This is the <em>second</em> bullet.

Text of the second bulleted paragraph. The <em> and </em> tags mark up the word “second” as emphasized text, which is usually displayed in italic type.

</li>

End tag for the second bullet.

</ul>

End tag for the entire bullet list.

</body>

End tag for the body section of the page.

</html>

End tag for the entire page.