"Minds are like parachutes - they only function when open." - Thomas Devar

Beginner's Guide to XHTML

Wednesday 22nd June 2005 - Saturday 7th January 2006

Categories: Guides, Internet, Code

Lists

In this reasonably short part, we are going to look at how to create lists, of which there are two main types: ordered and unordered. However, they both follow the same basic rules, and can be nested within each other.

An ordered list begins with the <ol> tag, while an unordered list begins with the <ul> tag. For each part of the list, we have text surrounded by the <li> tag, representing list item. For example, here is the code you would use for an ordered list:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Which creates this:

  1. Item 1
  2. Item 2

An unordered list is the same, except with a single letter change in the first and last tags:

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

The end product of which is:

The final point about lists is the ability to nest them. This means that you can have a list within a list. That list still follows the same rules as an ordinary list. You can mix ordered and unordered lists. For example:

<ol>
<li>Cake
<ul>
<li>Sponge Cake</li>
<li>Chocolate Cake</li>
</ul></li>
<li>Bread
<ul>
<li>White Bread</li>
<li>Brown Bread</li>
</ul></li>
</ol>

The result is this:

  1. Cake
    • Sponge Cake
    • Chocolate Cake
  2. Bread
    • White Bread
    • Brown Bread

Useful Links