HTML List

HTML lists allow web developers to group a set of related items in lists.

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

Ordered list.
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>

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Order List</h1>
    <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>
</html>

Try it Yourself »

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 typeand 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.

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Order with Attributes</h1>
    <ol type="a">
      <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>
    <ol type="A">
      <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>
    <ol type="i">
      <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>
    <ol type="I">
      <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>
  </body>
</html>

Try it Yourself »

Start

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

<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 is particularly useful if you have to interrupt your list to explain something. You can start off where the previous list ends

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Order with Attributes</h1>
    <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>
  </body>
</html>

Try it Yourself »

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.

Note: Left padding ofol and ulin standards base browsers like Gekco, Weblit and Opera. Or left margin of Internet Explorer

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>

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Order List</h1>
    <ul>
      <li>This is item #1.</li>
      <li>This is item #2.</li>
      <li>This is item #3.</li>
    </ul>
</html>

Try it Yourself »

Further, if you are using HTML versions earlier than HTML 5, you can change the bullet by specifying the type. For example, using:

<ol type="square">will display a square filledin bullet.
<ol type="circle">will display a circle bullet that is not filled in.

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Unorder with Attributes</h1>
    <ul type="square">
      <li>This is item #1.</li>
      <li>This is item #2.</li>
      <li>This is item #3.</li>
    </ul>
    <ul type="circle">
      <li>This is item #1.</li>
      <li>This is item #2.</li>
      <li>This is item #3.</li>
    </ul>
  </body>
</html>

Try it Yourself »

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>

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Description List</h1>
    <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>
  </body>
</html>

Try it Yourself »

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 sublists 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>

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
  <body>
      <h1>HTML List</h1>
    <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>
</body>
</html>

Try it Yourself »

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

Example

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
  <body>
      <h1>HTML List</h1>
    <ol>
      <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>
    </ol>
</body>
</html>

Try it Yourself »

HTML lists allow us to organize information on a web page in a clear and structured way. Lets us learn Block and Inline Elements in the next chapter.