By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Lists in HTML

Detailed Tutorial on when and how to use HTML Lists, as well as benefits from doing it correctly.

Edited: 2011-03-25 02:20

This Tutorial is on HTML Lists, how, and when they should be used. As well as usability benefits from using them.

The List Types

There are three types of lists in HTML, the first two are the Unordered Lists and Unordered lists, which are used for general up-marking of, mostly links. But also Recipes, movies, music, books, poams, names. Etc.

Unordered lists

Unordered lists is usually a bullet list of items, a bullet is placed in front of each link. An unordered list looks something like below:

  • List Item
  • List Item
  • List Item

Example

<ul>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
</ul>

Brugbart Vision!

Ordered lists

Ordered lists are used to markup an organized list of items, a number is usually placed in front of each item, depending on how the list is styled with css. The default Numbering system used is Decimals. Example shown below:

  1. List Item
  2. List Item
  3. List Item

Example

<ol>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
</ol>

Brugbart Vision!

Nested Lists

It is also possible to create a list inside another list in HTML, this is done by placing the list inside a List Item of its Parent list. This is done to create a sub-list of the item before, see the following Example.

Example

<ol>
 <li><a href="#List_Types">List Types</a></li>
 <li>
  <ol>
   <li><a href="#Ordered_lists">Ordered lists</a></li>
   <li><a href="#Unordered_lists">Unordered lists</a></li>
  </ol>
 </li>
 <li><a href="#Another_Section">Another Section</a></li>
</ol>

Brugbart Vision!

Note. There is a known problem with Nested Lists, you can read more about it in the Common Problems and Solutions section of this Tutorial

Definition Lists

The less used list, is the Definition List. This is used to create a list of Definitions and Terms. The Definition List looks like below.

HTML
Markup Language
CSS
style sheet language

Example

<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
<dt>CSS</dt>
<dd>style sheet language</dd>
</dl>

Brugbart Vision!

Lists in Usability

Using lists for your navigation links makes it easier for people using screen readers. Some benefits for these user agents are listed in below sections.

Screen Readers

It is recommended that you use lists for navigation, as it improves accessibility of your pages. It is also recommended that you place a heading above each list, as this will allow users to easily jump between the headings on a page. Lists will also enable richer styling of your site navigation. See also: Using Lists for Navigation

Below is an example showing an Ordered lists, with a Heading.

Example

Note. Its up to you to decide whether Ordered or Unordered Lists is most appropriate for the situation.

<h2>Navigation<h2>
<ol>
 <li>Frontpage</li>
 <li>About</li>
 <li>Contact</li>
 <li>Privacy Policy</li>
 <li>Terms of Use</li>
</ol>

Brugbart Vision!