HTML tutorial - Lists

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home

HTML tutorial

• The Basics
• Document structure
• Text formatting
• Semantics
• Links
• Special characters
• Images
• Lists
• Tables
• Framesets
• Forms
• Image maps

Printing

• View tutorial as a single document
• Print styling information
• Printing policy

Other tutorials

• JavaScript tutorial
• CSS tutorial
• Site design

Lists

There are three types of lists:

Unordered

These are typically thought of as bullet lists. The items in the list have no specific numeric relationship to each other. Most browsers use bullet points when displaying list items.

Ordered

The items in the list have an incremental numeric relationship to each other. Most browsers display numbers beside the list items, and may change this to alternative numberings as lists are nested.

Definition

This contains a series of terms and definitions, and would typically be used in a glossary.

The UL, OL and DL elements are block elements. The LI and DD elements they contain may either hold text directly, inline elements, or block elements.

The closing tag is optional for the <li> and <dd> tags, but as always, I recommend you include it anyway.

Unordered lists

The UL element can only contain LI elements directly. It must not contain any other elements unless they are inside the LI elements.

<ul>
  <li> list item 1 </li>
  <li> list item 2 </li>
</ul>

That will produce this output:

• list item 1
• list item 2

Nested lists

It is common to have lists inside lists, allowing you to have several levels of nesting. The nested UL should be put inside one of the LI elements of its parent:

<ul>
  <li> list item 1 </li>
  <li> list item 2
    <ul>
      <li> list item 2.1 </li>
      <li> list item 2.2 </li>
    </ul>
  </li>
</ul>

That will produce this output:

• list item 1
• list item 2
  • list item 2.1
  • list item 2.2

Ordered lists

The syntax of the ordered list is exactly the same as the unordered list, including the nesting. It is even possible to nest UL and OL lists inside each other.

<ol>
  <li> list item 1 </li>
  <li> list item 2 </li>
</ol>

That will produce this output:

1. list item 1
2. list item 2

Browsers will have a limit to the number of items they can include in such a list. In general, 10'000'000 is the highest number that can be reliably used in almost all browsers, with Konqueror being the only browser that has a limit lower than that, at just 32'767.

Definition lists

Definition lists consist of a series of terms and definitions. It is also possible to have multiple terms and multiple definitions, if that is appropriate. The terms are given using the DT element, and the definitions are given using the DD element. It is possible (although unusual) to nest definition lists, where the nested list must be inside the DD of the parent list.

The following sample shows a definition list. The first term has only one definition, the second has two definitions, and the third and fourth terms share the same definition.

<dl>
  <dt>Sump</dt>
  <dd>A place where water completely fills the cave passage</dd>
  <dt>Rift</dt>
  <dd>A vertical fracture in the rock, created by geological stress</dd>
  <dd>A passage formed along such a fracture, usually tall and narrow</dd>
  <dt>Abseil</dt>
  <dt>Rappel</dt>
  <dd>To descend a rope using a device to control speed</dd>
</dl>

That will produce this output:

Sump

A place where water completely fills the cave passage

Rift

A vertical fracture in the rock, created by geological stress

A passage formed along such a fracture, usually tall and narrow

Abseil

Rappel

To descend a rope using a device to control speed

Last modified: 4 September 2008

1. Previous
2. Next