HyperText Markup Language/Lists

In HTML, there are three kinds of lists, each appropriate for a different kind of information. An unordered list made with <ul> and </ul> tags is meant for elements that have no order or the order is unimportant (typically shown with bullets). An ordered list created using the <ol> and </ol> tags is typically shown with numbers and is used for elements whose order matters such as a sequence of steps to perform. Finally, there are definitions lists, created with <dl> and </dl> tags.

Ordered Lists

Ordered lists provide a list of items, each of which are preceded by an incremental number starting from 1.

Sample HTML:

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

Example rendering:

First item
Second item
Third item

Unordered Lists

Unordered lists display a list of items, each of which is prefixed by a bullet.

Sample HTML:

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

Example rendering:

First item
Second item
Third item

Definition Lists

Definition lists display a list of bolded terms, followed by the definition on a new line and prefixed by a tab (by default).

Sample HTML:

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Term 1: Definition of Term 1
Term 2: Definition of Term 2

If two terms share the same definition they can be grouped together like so:

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Cascading Style Sheets
CSS: Definition of Cascading Style Sheets (aka CSS)
Term 2: Definition of Term 2

If a term has two alternative definitions use a separate dd element for each definition, e.g.

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

Example rendering:

Mouse: Small mammal; Input device for a computer

Longer definitions can be broken up into paragraphs by nesting p elements within the dd element.

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

Example rendering:

Term 2

First paragraph of the definition.

Second paragraph of the definition.

Nested Lists

Lists can be nested. An example:

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

Example rendering:

Lists
- Numbered Lists
- Unnumbered Lists

When nesting, nested list elements should be within a parent list item element.

An example of incorrect nesting:

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

A further example of incorrect nesting, with two consecutive UL elements:

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

Note on format

The above descriptions of each of the three list types refer to the default rendering of the corresponding HTML code by the web browser. However, by using CSS, you are able to change the formatting of the lists. For example, with CSS you are able to make the lists horizontal as opposed to the vertical.

Example

An example of using lists to mark up a recipe for pancakes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pancakes</title>
  </head>
  <body>
    <h1>A Recipe for Pancakes</h1>
    <p>From <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
    <p>These pancakes make a good breakfast for a family.
       They go well with real maple syrup.
       They are healthy too (as long as you don't over-do the syrup!)
       since whole wheat flour contributes to your fiber intake.
    </p>
    <h2>Ingredients</h2>
    <ul>
      <li>1 cup whole wheat flour</li>
      <li>1 tablespoon common granulated sugar</li>
      <li>2 teaspoons baking powder</li>
      <li>1/4 teaspoon salt</li>
      <li>1 egg</li>
      <li>1 cup milk</li>
      <li>2 tablespoons oil</li>
      <li>additional oil for frying</li>
    </ul>
    <h2>Procedure</h2>
    <ol>
      <li>Oil a frying pan.</li>
      <li>Mix the dry ingredients in one bowl.</li>
      <li>In another bowl, scramble the egg, then add the other wet ingredients.
          This includes the 2 tablespoons of oil.</li>
      <li>Mix the dry and wet ingredients together,
          well enough to eliminate dry spots but no more.</li>
      <li>Heat the frying pan to medium temperature.
          The pan is hot enough when a drop of water dances around
          rather than simply boiling away.</li>
      <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
      <li>The pancake will bubble. When the bubbling settles down and
          the edges are slightly dry, flip the pancake.</li>
      <li>When the pancake looks done, remove it and start another one.</li>
    </ol>
    <h2>Toppings</h2>
    <p>Traditionally, pancakes are topped with butter and maple syrup.
       Other toppings can include strawberries, applesauce, cinnamon, or sugar.
    </p>
 </body>
</html>