Cascade CMS

Lists

Use different types of lists to group information according to its nature to provide orientation for users.

Unordered lists are used when the order of the items is not relevant. List items in unordered lists are marked with a bullet.
Ordered lists are used for sequential information and are automatically enumerated by the browser.
Description lists are groups of related terms and descriptions which are connected programmatically.

Individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists.

Unordered list

The unordered list consists of one <ul> element and multiple list item (<li>) elements:

Example:

Corn
Tomatoes
Beans
Onions
Garlic

Code snippet:

<ul>
    <li>Corn</li>
    <li>Tomatoes</li>
    <li>Beans</li>
    <li>Onions</li>
    <li>Garlic</li>
    …
</ul>

Ordered list

The ordered list consists of one <ol> element and multiple list item (<li>) elements:

Example:

Cook beans for 45 minutes.
Cut vegetables in small cubes.
Sauté onions and garlic.
Deglaze using the tomatoes.
Add corn and beans.

Code snippet:

<ol>
    <li>Cook beans for 45 minutes.</li>
    <li>Cut vegetables in small cubes.</li>
    <li>Sauté onions and garlic.</li>
    <li>Deglaze using the tomatoes.</li>
    <li>Add corn and beans.</li>
    …
</ol>

Nested lists

Every list can be nested into another list. In the following example, the order of preparation is not critical, but the preparation itself should be done before using the ingredients. The information is still easy to digest, assistive technology can easily inform users about the number of steps.

Example:

Prepare ingredients
- Cook beans for 45 minutes.
- Cut vegetables in small cubes.
Sauté onions and garlic.
Deglaze using the tomatoes.
Add corn and beans.

Code snippet:

<ol>
    <li>
        Prepare ingredients
        <ul>
            <li>Cook beans for 45 minutes.</li>
            <li>Cut vegetables in small cubes.</li>
        </ul>
    </li>
    <li>Sauté onions and garlic.</li>
    <li>Deglaze using the tomatoes.</li>
    <li>Add corn and beans.</li>
    …
</ol>

Description lists

A description list consists of one or more term and description groupings. Each grouping associates one or more terms (the contents of <dt> elements) with one or more descriptions (the contents of <dd> elements).

A grouping begins either on the first item of the list or whenever a <dt> element follows an <dd> element.

Example 1: One term, multiple descriptions

In the following example, John and Luke are described as authors, and Frank is described as editor.

Example:

Authors: John; Luke
Editor: Frank

Code snippet:

<dl>
  <dt>Authors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
  <dt>Editor</dt>
  <dd>Frank</dd>
</dl>

Example 2: Multiple terms, one description

In the next example, two different spellings of a word are defined using description lists. In such cases, use the dfn element to mark up the defined term.

Example:

color
colour: A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.

Code snippet:

<dl>
   <dt lang="en-US"><dfn>color</dfn></dt>
   <dt lang="en-GB"><dfn>colour</dfn></dt>
   <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>

Example 3: Multiple terms, multiple descriptions

In this example, John and Luke are authors and also editors:

Example:

Authors
Editors: John; Luke

Code snippet:

<dl>
  <dt>Authors</dt>
  <dt>Editors</dt>
  <dd>John</dd>
  <dd>Luke</dd>
</dl>

Content and code samples provided by Lists by WAI Web Accessibility Tutorials.