Lists

This page provides a variety of lists to test proper behaviour with browsers and ATs.

Single Level

UL

The first list demonstrates an unsorted list. A peculiarity of UL and OL is that nothing normally goes inside the list tags except list items. If you place anything inside a UL or OL but not within the LI structure, it is still indented, like this use of the phrase "three fruit". Most ATs will treat the phrase "three fruit" as part of the list, and may even label the list using this text, although that isn't part of the specification.

OL

The second list demonstrates an enumerated list. I'll give you three reasons you use this:
  1. you want to indicate sequence
  2. you want to rank or otherwise indicate order
  3. you like numbers better than bullets, even though, as with this list, the numbering is pretty arbitrary

DL

A definition list should be used exclusively for structuring definitions. Unlike the other lists, it consists of a three-part structure. There is the DL, which indicates the beginning and end of a definition list. Unlike OL and UL, text inside the DL but outside the inner tags is not immediately indented.
DT or Definition Term
The Term is the word or phrase being defined
DD, or Definition Description
The DD describes the term. In this example DL, there are two sets of terms and descriptions.

Nested lists

With a nested list, a new UL or OL is put inside an existing UL or OL. As with simple lists, the user agent will handle indentation and bullet variations.

Ingredients as nested list

Instructions as nested list

  1. Mix dry ingredients
    1. Put 1 cup flour in bowl
    2. Add 1 Tbsp sugar
    3. Ad 1 tsp salt and mix
  2. Mix wet ingredients
    1. Measure 1 cup milk
    2. Add a egg and blend
  3. Add wet ingredients into dry ingredients

Unordered tasks with ordered tasks nested