XHTML | HTML to XHTML

Beginning XHTML - Basic Tags

Most text documents are composed primarily of paragraphs and headers. Often lists are included for clarity and to present information in an orderly manner. This section of the tutorial will introduce the XHTML tags to use to identify these items in an XHTML document.

A text document has been provided that has a first draft of the contents of our first iteration of our page on the solar system.

Header `h1` to `h6` Tags

There are six header tags available in XHTML. They are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Most browsers will render h1 content with a rather large font size, with each successive header growing smaller in size.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Our text document has two headers, a main header "The Solar System", and a secondary header "The Nine Planets". Since these are part of the main body of the XHTML page to be displayed, they need to be specified within the body element.


<body>
<h1>The Solar System</h1>
<h2>The Nine Planets</h2>
<body>

Our page would still be somewhat plain if we saved and loaded it at this point, but at least we would have the two headers, looking something like this:

The Solar System

The Nine Planets

However, before we save and view our page, let's finish adding the rest of the contents of our text file.

The paragraph `p` Tag

Next, we will add the paragraphs to our file. Again, since these are to be part of the main body, they need to be enclosed within the body element. The blank lines in the source code shown below have no effect on how the XHTML content is rendered by the browser. I added them to enhance readability.

<body>
<h1>The Solar System</h1>

<p>The solar system consists of the sun, the nine planets and
their moons, and other small bodies, including the asteroids and
comets. Many of the planets are also orbited by one or more
moons.</p>

<h2>The Nine Planets</h2>

<p>The nine planets, in order of their distance from the sun are
as follows:</p>
</body>

The p tag is pretty straightforward. Browsers vary in default rendering of XHTML elements, but most browsers will essentially put a visual line break before beginning a paragraph. As an example, if we removed the secondary header between the two paragraphs, the paragraphs would be displayed something like this:

The solar system consists of the sun, the nine planets and their moons, and other small bodies, including the asteroids and comets. Many of the planets are also orbited by one or more moons.

The nine planets, in order of their distance from the sun are as follows:

As you can see, the paragraphs are clearly separated.

Lists - Ordered (`ol`) and Unordered (`ul`)

Finally, we need to add the list of planets. We could add a paragraph with markups looking like this:


<p>
1. Mercury<br />
2. Venus<br />
3. Earth<br />
4. Mars<br />
5. Jupiter<br />
6. Saturn<br />
7. Uranus<br />
8. Neptune<br />
9. Pluto<br /></p>

This works fine as far as display goes. The <br /> tags tell the browser to make a line break before displaying further content. These tags look a bit odd, with the space and / after the tag name. That is because the br tag is what is called an empty tag.

An empty tag is one that will never contain any content between the beginning and closing tags. We could specify <br></br> for this line break, but thankfully, XHTML provides a shortcut for closing empty tags. That is using /> at the end of the tag instead of just the > symbol. However, this causes some browsers some difficulties, but putting a space before the forward slash will work for most browsers except the very oldest ones. So for br, we can code <br /> which will meet the XHTML rule of closing all tags.

As mentioned, the paragraph would display fine, looking somewhat like this:

1. Mercury
2. Venus
3. Earth
4. Mars
5. Jupiter
6. Saturn
7. Uranus
8. Neptune
9. Pluto

However, in terms of document structure, the planets make up a list. So instead of using a paragraph with line breaks, let's mark up the planets using the XHTML tags for lists.

There are two types of lists in XHTML, ordered (ol) and unordered (ul). By default, ordered lists number the list elements, while unordered lists will use bullets.

A list contains list elements, which in our case are the individual planets. A list element is marked up using the li tag. Since we want our planet list to be numbered, we will use an ordered list:

<ol>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
  <li>Jupiter</li>
  <li>Saturn</li>
  <li>Uranus</li>
  <li>Neptune</li>
  <li>Pluto</li>
</ol>

As you can see, this markup will result in a tidy, numbered list, which in most browsers will also be indented slightly:

Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune
Pluto

The numbers are generated automatically, and a new item added to the list (in case a tenth planet is discovered!) will be automatically numbered as well.

With this list, we will have finished the markup of the text document. The XHTML source should contain the following, allowing for variances in spaces and indentation for clarity:

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

<head>
  <title>The Solar System</title>
</head>

<body>
<h1>The Solar System</h1>

<p>The solar system consists of the sun, the nine planets and
their moons, and other small bodies, including the asteroids and
comets. Many of the planets are also orbited by one or more
moons.</p>

<h2>The Nine Planets</h2>

<p>The nine planets, in order of their distance from the sun are
as follows:</p>

<ol>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
  <li>Jupiter</li>
  <li>Saturn</li>
  <li>Uranus</li>
  <li>Neptune</li>
  <li>Pluto</li>
</ol>

</body>
</html>

If you save and load your XHTML source in your browser now, it should look like this example.

It is quite possible to have lists within lists. Let's say we wish to include in the planet list the average distance from the sun and the names of the main moons, as shown in this text file.

From the text file, we see the average distance of Mercury from the sun is 57,909,175 km¹, and it has no moons, so we will change the Mercury li element to include another list. This list will be unordered, which will by default display bullets instead of numbers.

<li>Mercury
  <ul>
      <li>Average Distance from Sun - 57,909,175 km</li>
      <li>No moons</li>
  </ul>
</li>

Again, notice the nesting. The unordered list is contained within the li element for Mercury, so the closing tag for Mercury li element does not occur until after the ul element is closed with </ul>.

Rendered, you can see how the sublist under Mercury is further indented by default, making it visibly clear it is a list pertaining specifically to Mercury:

Mercury
- Average Distance from Sun - 57,909,175 km
- No moons

Here is an example of the solar system page updated to include the sublists for each of the planets as shown in the text file.

Next, we will add more information on the planets, such as temperature and diameter, but this information will be better presented in a table, not a list. Tables will be introduced in the next chapter of this tutorial.

¹The average distances of the planets from the sun and the names and number of the moons were taken from the Planetary Fact Sheets, the Planet Profiles and The Solar System Page provided by NASA on the solar system.

Next Chapter - Quotations and Tables