XHTML Lesson 3: Unordered Lists

Lists are very useful on the Web. This site uses many of them. Most of the time, an unordered list is all you need. The standard presentation of unordered lists in a Web browser shows each list item with a small bullet on the left side.

Groceries to buy:

It is possible to nest lists to create hierarchical unordered lists. Notice how the bullet symbols are rendered differently to make the hierachical nature of the list even more obvious.

Food Groups:

Assignment:

Type the code below into any text editor and save it with the name "lesson03.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 3: Unordered Lists</title>
</head>
<body bgcolor="white">
<h1>Unordered Lists</h1>
<p>When you need to present a list of items and the order is not meaningful, use an unordered list like the one below.</p>
<p>Fruits I like:</p>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Tomatoes (yes tomatoes are fruits)</li>
</ul>
</body>
</html>

A Detailed Explanation:

The <ul> </ul> tag pair creates the unordered list. The <li> </li> tag pair creates each list item.

Previous Lesson | Next Lesson