Lists

Whenever possible, avoid nesting lists within lists; they work fine, but don't look very nice. Instead of a list within a list, try using plain <p> tags for the outer "layer" of the list.

Unordered lists

  • apples
    • Red Delicious
    • Fuji
    • Granny Smith
      • green
      • sour
  • pears
  • bananas
<ul>
  <li>apples
    <ul>
      <li>Red Delicious</li>
      <li>Fuji</li>
      <li>Granny Smith
        <ul>
          <li>green</li>
          <li>sour</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>pears</li>
  <li>bananas</li>
</ul>

Ordered lists

  1. apples
    1. Red Delicious
    2. Fuji
    3. Granny Smith
      1. green
      2. sour
  2. pears
  3. bananas
<ol>
  <li>apples
    <ol>
      <li>Red Delicious</li>
      <li>Fuji</li>
      <li>Granny Smith
        <ol>
          <li>green</li>
          <li>sour</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>pears</li>
  <li>bananas</li>
</ol>

Definition lists

Alpha
the definition of alpha
Beta
the definition of beta
Gamma
the definition of gamma
<dl>
  <dt>alpha</dt>
  <dd>the definition of alpha</dd>
  <dt>beta</dt>
  <dd>the definition of beta</dd>
  <dt>gamma</dt>
  <dd>the definition of gamma</dd>
</dl>