Yellow Jacket
Blue Ridge High School
Yellow Jacket
Home > Web Design > Lessons > Lists

Types of Lists

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts and ends with the <li> tag.

<ol>
<li>Web One</li>
<li>Web Two</li>
<li>Web Three</li>
</ol>

Here is how it would look in a web browser:
  1. Web One
  2. Web Two
  3. Web Three
Example
This example demonstrates an ordered list.

Unordered Lists

An unordered list (one without any order to it) is a list of items. The list items are marked with bullets (typically small black circles).
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Web One</li>
<li>Web Two</li>
<li>Web Three</li>
</ul>

Here is how it would look in a web browser:
Example
This example demonstrates an unordered list.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it would look in a web browser:
Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
Example
This example demonstrates a definition list.

Additional Information

Different types of ordered lists
This example demonstrates different types of ordered lists. Try creating additional list items!
Different types of unordered lists
This example demonstrates different types of unordered lists.
Nested lists
This example demonstrates how you can nest lists (a list within a list).
Nested list 2
This example demonstrates a more complicated nested list.

Overview

Tag Value Description
<ol> 1, A, a, I, or i Ordered list
<ul> disc, square, circle Unordered list
<li>   List item (used inside <ol> or <ul>)
<dl>   Definition list
<dt>   Definition term (used inside <dl>)
<dd>   Definition (used inside <dl>)