There are two most common lists used in HTML and these are:

1. Ordered list.
2. Unordered list.

Ordered Lists

You use ordered lists if the sequence of your items is important.

Ordered lists enumerate the various items on your list on separate lines. It will have less space in between items, unlike when you use

or paragraph tags. Lastly, ordered lists are typically indented.

The usual syntax for ordered lists is as follows:

 

<ol>

<li>This is the first item on the list. </li>
<li>This is the second item on the list. </li>
<li>This is the third item on the list. </li>

</ol>

This will be displayed as:

1. This is the first item on the list.
2. This is the second item on the list.
3. This is the third item on the list.

Attributes that you can use with ordered lists

As with other tags, you can change how ordered lists look by adding attributes. Two of the most used attributes are type and start.

Type

Instead of numbers, you can also have letters and Roman numerals. Types and their corresponding syntax are as follows:

<ol type=”a”> will display a, b, c
<ol type=”A”> will display A, B, C
<ol type=”i”> will display i, ii, iii
<ol type=”I”> will display I, II, III

Start

You can have your ordered lists start with any number you want. For example:

<ol start=”3″>

The resulting list will start with 3 accompanying the first item.

<ol start=”3″>
<li>This is the first item on the list.</li>
<li>This is the second item on the list.</li>
<li>This is the third item on the list.</li>
</ol>

This will be displayed as:

1. This is the first item on the list.
2. This is the second item on the list.
3. This is the third item on the list.

This is particularly useful if you have to interrupt your list to explain something. You can start off where the previous list ends.

Unordered Lists

Unordered lists are also called bulleted lists and, unlike ordered lists, the sequence of items is not important in this type of list.

Similar to ordered lists, each item in your list is presented on separate lines, introduced by a bullet. Unordered lists are also indented.

You can create an unordered list by using the following syntax:

<ul>
<li>This is item #1.</li>
<li>This is item #2.</li>
<li>This is item #3.</li>
</ul>

This will display as:

• This is item #1.
• This is item #2.
• This is item #3.

Further, if you are using HTML versions earlier than HTML 4, you can change the bullet by specifying the type.

For example, using:

<ul type=”square”> will display a square filled-in bullet.
<ul type=”circle”> will display a circle bullet that is not filled in.

While ordered and unordered lists are basic forms of lists, you might need to make use of lists that have more information other than just list items.

HTML can handle that as well. Let us take a look at description lists and nested lists.

Description lists

Description lists allow you to have a description for each item on your list. Unlike <ol> and <ul>, you will not use <li> for list items. Instead, <dl> tags need <dt> for the list items and <dd> for the description. Description lists are also known as definition lists.

The correct syntax would be:

<dl>
<dt>This is item #1.</dt>
<dd>- This is a description of item #1</dd>
<dt>This is item #2.</dt>
<dd>- This is a description of item #2</dd>
</dl>

The browser will display this as:

This is item #1.

– This is a description of item #1

This is item #2.

– This is a description of item #2

As you can see, only the description is indented.

Nested lists

A nested list may be an unordered list or an ordered list where you can have sub-lists for any item you want. This is good if you have complicated lists wherein you might need to enumerate another list for an item in your original list. Perhaps the simplest way to describe nested lists is that it is a list within a list.

The correct syntax for nested lists would be:

<ul>
<li>This is item #1.</li>
<li>This is item #2.
<ul>
<li>This is item #2 (a).</li>
<li>This is item #2 (b).</li>
</ul>
</li>
<li>This is item #3.</li>
</ul>

This would be displayed as:

• This is item #1.
• This is item #2.
  • This is item #2 (a).
  • This is item #2 (b).
• This is item #3.

If you need to use an ordered list, you can just replace <ul> with <ol>. For example:

<ol>
<li>Jeans</li>
<li>Shirts
<ul>
<li>Navy blue.</li>
<li>Plain white.</li>
</ul>
</li>
<li>This is item #3.</li>
</ol>

Will be displayed as:

<ol>
<li>Jeans</li>
<li>Shirts
<ul>
<li>Navy blue.</li>
<li>Plain white.</li>
</ul>
</li>
<li>This is item #3.</li>
</ol>

And that’s how you come up with lists for your HTML codes. Screenshot showing the use of various HTML list styles: