Today we are going to talk about List types in HTML. There are three lists that HTML supports:

  • Unordered Lists
  • Ordered Lists
  • Definition Lists

Unordered Lists

An unordered List is a list that have bullets in front of the list item (normally little black circles). The Unordered List starts with a <ul> tag and each new item starts with an <li> tag. The syntax is as follows:

1
2
3
4
5
6
7
8
9

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ul>

The browser output will look this:

  • Item 1
  • Item 2
  • Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an unordered list if we wanted to create a list that didn’t have any specific order, like a grocery shopping list.

We can also change how the bullets look without using style sheets or inline css. Within the <ul> tag we simply add an attribute called type and add the value we want. Here are the values we can put:

  1. disc
  2. circle
  3. square

Here is the syntax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<ul type="disc">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

<ul type="circle">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

<ul type="square">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

The browser output is like this:

  • Item 1
  • Item 2
  • Item 1
  • Item 2
  • Item 1
  • Item 2

Ordered List

An ordered list is a list that is marked with numbers instead of bullets. The ordered list starts with an <ol> tag and then each list item (like the unordered list) has the <li> tag around the item. The syntax is as follows:

1
2
3
4
5
6
7
8
9

<ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ol>

The browser output will look this:

  1. Item 1
  2. Item 2
  3. Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an ordered list if we wanted to create a list thathas a specific order. A good example would be if you were creating a step by step guide.

Like the unordered list, there is a way to change the list type without using styles or inline css to an ordered list. Here is the syntax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<ol type="A"> <!--Upper Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

<ol type="a"> <!--Lower Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

<ol type="I"> <!--Upper Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

<ol type="i"> <!--Lower Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

The browser output will look like this:

  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2

Definition List

A definition list isn’t really a list but rather a list of items (terms) and each item (term) has a description.

The definition list begins with an <dl> (definition list) tag.

Each term starts with a <dt> (definition term) tag.

Each term description starts with a <dd> (definition description) tag.

The browser output will look like this:

Item 1
Description 1
Item 2
Description 2
Item 3
Description 3