HTML Lists

A list in HTML is a collection of items that are displayed in a list format with bullet points.  The <ul> tag creates an unordered list and the <ol> tag creates an ordered list. Inside these lists are <li> tags which specify the list items.

HTML Tutorial

Example

Two lists: an unordered list with bullet points, and an ordered list with numbers.

  • Toyota
  • Ford
  • Honda
  1. Lexus
  2. Tesla
  3. Mercedes
<ul>
   <li>Toyota</li>
   <li>Ford</li>
   <li>Honda</li>
</ul>

<ol>
  <li>Lexus</li>
  <li>Tesla</li>
  <li>Mercedes</li>
</ol>

Unordered Lists

The <ul> tag creates an unordered list.
List items are added with nested <li> tags.

  • Paper
  • Pencils
  • Scissors
<ul>
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

For more information about unordered lists, see our HTML ul Tag Reference.


List Item Markers

To set the style of the item markers use the CSS list-style-type property.
These are the built-in types.

Type Description
disc Sets the list item to a bullet (default)
circle Sets the list item to a circle
square Sets the list item to a square
none The list items will not be marked

Let's look at each one.


Disc Marker

An unordered list with a disc style marker.

  • Paper
  • Pencils
  • Scissors
<ul style="list-style-type:disc;">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

Circle Marker

An unordered list with a circle style marker.

  • Paper
  • Pencils
  • Scissors
<ul style="list-style-type:circle;">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

Square Marker

An unordered list with a square style marker.

  • Paper
  • Pencils
  • Scissors
<ul style="list-style-type:square;">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

No Marker

An unordered list with a none style marker, i.e. no marker.

  • Paper
  • Pencils
  • Scissors
<ul style="list-style-type:none;">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

Ordered Lists

The <ol> tag creates an ordered list.
List items are added with nested <li> tags.

  1. Paper
  2. Pencils
  3. Scissors
<ol>
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

For more information about ordered lists, see our HTML ol Tag Reference.


The type Attribute

Use the type attribute on the <ol> tag to define the item numbering type.

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Numbers Type

An ordered list with a numbers type marker.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="1">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Did you know?

Did you know?

Reversing the list numbering

By default the numbers in HTML lists display in ascending order: 1, 2, 3, etc.
You can reverse the numbers by adding the reversed attribute.

An ordered list with numbering in reverse order.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="1" reversed>
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Tip:  The reversed attribute does not reverse the items -- just the numbering.


Uppercase letters

An ordered list with a uppercase letters.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="A">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Lowercase letters

An ordered list with lowercase letters.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="a">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Uppercase Roman numbers

An ordered list with uppercase roman numbers.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="I">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Lowercase Roman numbers

An ordered list with lowercase roman numbers.

  1. Paper
  2. Pencils
  3. Scissors
<ol type="i">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ol>

Did you know?

Did you know?

Using an image as list bullet or marker

In addition to the built-in markers you can also create custom image markers using CSS.
This example shows how to use the list-style-image CSS property for this:

  • Paper
  • Pencils
  • Scissors
<style>
 .arrow-marker {
    list-style-image: url('/img/html/arrow-marker.png');
}
</style>

<ul class="arrow-marker">
  <li>Paper</li>
  <li>Pencils</li>
  <li>Scissors</li>
</ul>

Start Number

By default, ordered lists start counting at 1.
To start at a different number use the start attribute.

  1. Paper
  2. Pencil
  3. Scissor
<ol start="50">
  <li>Paper</li>
  <li>Pencil</li>
  <li>Scissor</li>
</ol>

Nested Lists

Create nested HTML lists by placing <ul> or <ol> lists inside a parent <li> element.

  • Paper
  • Pencils
    • Black Pencils
    • Color Pencils
  • Scissors
<ul>
  <li>Paper</li>
  <li>Pencils
    <ul>
      <li>Black Pencils</li>
      <li>Color Pencils</li>
    </ul>
  </li>
  <li>Scissors</li>
</ul>

Description Lists

A Description list is a glossary with one or more terms and descriptions.

To create a description list use the <dl> tag.

Terms and descriptions can then be added with <dt> and <dd> tags respectively.

An example description list.

Paper
- great for pencil drawing
Pencils
- draw on paper or canvas
<dl>
  <dt>Paper</dt>
  <dd>- great for pencil drawing</dd>
  <dt>Pencils</dt>
  <dd>- draw on paper or canvas</dd>
</dl>

For more information about HTML description lists, visit our HTML dl Reference.


You may also like

Guides