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

Featured Videos

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next