12
2011
Lesson 10 – Lists
An article by 
Lists are a part of everyday life. People use lists when grocery shopping and create to do lists when planning a series of events they want to accomplish.
There are three types of lists in HTML: unordered lists, ordered lists and definitions lists. Unordered and ordered lists are the two simplier lists of the three. They work the same way except for unordered lists uses bullets on the left of each item and ordered lists uses numbers.
Unordered and Ordered Lists
Unordered lists uses the <ul> tag and the ordered lists use the <ol> tags. To define each item within the lists, the <li> tag is used.
Create a new HTML documents called lists.htm and put the following code as it’s content.
<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<ul>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
<ol>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</body>
</html>
A cool aspect of lists is that they can be nested within each other.
<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<ul>
<li>First List Item
<ul>
<li>Child Item 1 </li>
<li>Child Item 2 </li>
</ul>
</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
</body>
</html>
Definition Lists
Definition lists use the <dl> tag. The items in a definition list work a little bit differently than a ordered or unordered list. Definition lists use the <dt> tag which is a definition term and the <dd> tag which is a definition description.
For each item in the list, the <dt> tags comes first, followed by <dd> tags. I used the plural forms because you can put multple <dt> tags together and multiple <dd> tags together.
Simple Example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Learning Lists</title>
</head>
<body>
<dl>
<dt>Title 1</dt>
<dd>Definition 2</dd>
<dt>Title 2</dt>
<dd>Definition 2</dd>
</dl>
</body>
</html>
Complex Example
<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<dl>
<dt>Title 1</dt>
<dd>Definition 1-1</dd>
<dd>Definition 1-2</dd>
<dt>Title 2</dt>
<dt>A Sub-Title</dt>
<dd>Definition 2-1</dd>
<dd>Definition 2-2</dd>
</dl>
</body>
</html>
