Tech and Media Labs
This site uses cookies to improve the user experience.




HTML Lists

Jakob Jenkov
Last update: 2014-06-15

HTML contains two different list elements which can be used to create bullet lists and numbered lists.

The two HTML list elements are <ul> (unordered list) and <ol> (ordered list). Both list elements will be explained in more detail in the following sections.

ul - Unordered Lists

Unordered lists are bullet lists. Such lists are created using the <ul> element. Here is an example:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item etc.</li>
</ul>    

The <li> elements nested inside the <ul> element are used to enclose each list item in the list.

Here is how the list looks in a browser:

  • List Item 1
  • List Item 2
  • List Item etc.

Bullet Types

You can choose different bullet types for the unordered list using the type attribute. You can use the following types:

<ul type="square" ></ul>
<ul type="circle" ></ul>
<ul type="disc"   ></ul>

Here is how these bullets look in the browser:

  • Square
  • Circle
  • Disc

ol - Ordered Lists

Ordered lists are used to create numbered lists. Instead of bullets, each list item is assigned a number in a sequence. Here is an example:

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>    

As you can see, the <li> element is used to enclose each list item in ordered lists too.

Here is how the ordered list looks in the browser:

  1. List item
  2. List item
  3. List item

Number Types

You can set the number types used in an ordered list using the type attribute. Here are the number types you can use:

<ol type="a"></ol>
<ol type="i"></ol>                      
<ol type="1"></ol>

Here is how these number types look in the browser:

  1. Alphabetic numbers (a, b, c etc.).
  1. Roman literals (i, ii, iii etc.).
  1. Numbers (1, 2, 3 etc.).

You can also set the first number to use in the list, using the start attribute. Here are a few examples:

<ol type="a" start="3"><li>Alphabetic numbers.</li></ol>
<ol type="i" start="3"><li>Roman literals.</li></ol>
<ol type="1" start="3"><li>Numbers.</li></ol>

In this example each of the ordered lists are set to start from the 3rd numeral in their number sequences, because the value of the start is set to 3.

Here is how the lists look in a browser:

  1. Alphabetic numbers.
  1. Roman literals.
  1. Numbers.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC