Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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.

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 details on 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 details on 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>

For details on the list-style-image property, visit our CSS list-style-image property reference.


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 details on HTML description lists, visit our HTML dl tag reference.


You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides