Overview
In this lesson you will learn how to create ordered lists (numbered), unordered lists (bulleted), description lists (definitions), and nested lists.
Ordered List
An ordered list is one in which the order matters and is synonymous with a numbered list. To create an ordered list you will use the ol tags. Think of this element as the container for the list items. You then use li tags to create the list items.
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Brush teeth</li>
<li>Take shower</li>
<li>Get dressed</li>
</ol>
Unordered List
As the name suggests, an unordered list is one in which the order doesn’t matter. Todo lists are often made using the ul tags and will result in a bulleted list. The li tags are used to create the list items.
<ul>
<li>Take out trash</li>
<li>Wash dishes</li>
<li>Mow lawn</li>
<li>Call Mom</li>
<li>Pay bills</li>
</ul>
Description List
If you want to display a list of terms and definitions, you would create a description list. Use the dl tags to define the list type. These lists are a little different because they consist of pairs of terms and definitions. Use the dt tags to create an element for a term, and then the dd tags to create the description.
<dl>
<dt>Computer</dt>
<dd>A programmable device that is capable of storing, retrieving, and processing data.</dd>
<dt>Website</dt>
<dd>One or more World Wide Web pages made available by an individual, company, educational institution, government or organization and usually connected by hyperlinks.</dd>
<dt>Server</dt>
<dd>A computer in a network that provides a service.</dd>
</dl>
Nested Lists
A list can be nested inside another list. This can be very useful when you want to create levels of indentation on the page. The following example shows a list of auto makers and includes a nested list with some of the Honda models. Notice the different levels of indentation as well as the different types of bullets.
Create the first list using the ul tags and add your list items with li tags. Create the nested list by adding another ul element within the appropriate list item tags and add your list items.
<ul>
<li>BMW</li>
<li>Chevy</li>
<li>Honda
<ul>
<li>Accord</li>
<li>Civic</li>
<li>Element</li>
<li>Pilot</li>
<li>Ridgeline</li>
</ul>
</li>
<li>Tesla</li>
</ul>
Summary
In HTML you can create bulleted lists, numbered lists, description lists, and nested lists. An unordered List is a bulleted list made using ul tags for the container and li tags for the list items. An ordered List is a numbered list made using ol tags for the container and li tags for the list items. A description List is a list of terms and descriptions made using dl tags for the container, dt tags for the terms, and dd tags for the descriptions. A Nested List is a list placed inside another list.
