Ordered lists are great for presenting step-by-step procedures or creating content outlines. The standard presentation of ordered lists in a Web browser shows each list item with a number on the left side.
How to shave a face:
It is possible to nest lists to create hierarchical ordered lists. The type of number or letter can be specified to create standard outlines like the one below.
Music History before 1750:
Type the code below into any text editor and save it with the name "lesson04.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser. If you haven't already figured it out, you can save a lot of time by copying and pasting code from previous pages and just changing the content as needed.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>XHTML Lesson 4: Ordered Lists</title>
</head>
<body bgcolor="white">
<h1>Ordered Lists</h1>
<p>When you need to present a list of items and the order is meaningful,
use an ordered list like the one below.</p>
<p>Step-by-step procedure for shaving a face:</p>
<ol>
<li>Wash face.</li>
<li>Apply shaving cream.</li>
<li>Use sharp razor to scrape hair off face.</li>
<li>Apply after-shave lotion.</li>
<li>Scream loudly.</li>
</ol>
<p>When you wish to present a hierarchical outline, specify the type of
number used for each level of the list.</p>
<p>Music History before 1750:</p>
<ol type="I">
<li>Medieval (500-1450)
<ol type="A">
<li>Gregorian Chant</li>
<li>Organum and early polyphony</li>
<li>Motets</li>
</ol>
</li>
<li>Renaissance (1450-1600)
<ol type="A">
<li>Cantus Firmus Masses
(Palestrina)</li>
<li>Madrigals (Willaert, Lassus,
Gesualdo)</li>
</ol>
</li>
<li>Baroque (1600-1750)
<ol type="A">
<li>Monody (Early Baroque - Caccini, Peri,
Monteverdi)</li>
<li>Complex Counterpoint (Late
Baroque)</li>
<li>Concerto Grosso (Bach,
Vivaldi)</li>
</ol>
</li>
</ol>
</body>
</html>
The <ol> </ol> tag pair creates the ordered list. The <li> </li> tag pair creates each list item. Within the <ol> tag you may specify the type of number or letter you desire (Roman numerals (I or i), Arabic numerals (1), Uppercase letters (A), or lowercase letters (a)). If you don't specify a type, arabic numerals are used by default in most browsers. Please notice how nested lists are contained within the <li> </li> tag pair of the parent item in the list.