Bulleted lists

The most common type is a bulleted list. For example:

• Sugar
• Spice
• Everything nice

Here’s the code:

<ul>
  <li>Sugar</li>
  <li>Spice</li>
  <li>Everything nice</li>
</ul>

Figure 1. A bulleted list

ul stands for “unnumbered list.”

You can change the bullets with CSS. Use list-style-type, like this:

li {
   list-style-type: circle;
}

You can use disc, circle, square, or none.

Numbered lists

Here’s a numbered list:

1. Dissolve 500 grams of sugar into 2 liters of warm water.
2. While heating, slowly stir in the contents of the Spice packet.
3. Boil for 3 minutes.
4. Stir in the contents of the Everything Nice packet.
5. Simmer for 20 minutes.
6. Carefully pour into mold.
7. Allow to cool naturally overnight. Do not refrigerate or freeze.

Here’s the code:

<ol>
  <li>Dissolve 500 grams of sugar into 2 liters of warm water.</li>
  <li>While heating, slowly stir in the contents of the Spice packet.</li>
  <li>Boil for 3 minutes.</li>
  <li>Stir in the contents of the Everything Nice packet.</li>
  <li>Simmer for 20 minutes.</li>
  <li>Carefully pour into mold.</li>
  <li>Allow to cool naturally overnight. <em>Do not refrigerate or freeze.</em></li>
</ol>

Figure 2. A numbered list

ol stands for “ordered list.”

Nested lists

You can nest lists, that is, place one list inside another. You can freely mix bulleted and numbered lists. For example:

1. Dissolve 500 grams of sugar into 2 liters of warm water.
• We recommend distilled water for best results.
• Use waste water from a nuclear power plant for a chance of mutant powers.
2. While heating, slowly stir in the contents of the Spice packet.
3. Boil for 3 minutes.
4. Stir in the contents of the Everything Nice packet.
• Discard any broken items.
• Add computer chips to increase geekiness.
• A hot temper? Add tabasco sauce. But only a few drops!
5. Simmer for 20 minutes.
6. Carefully pour into mold.
• Your kit includes our popular Generon 110 mold. To customize the Generon 110:
1. Remove the customization interface cover.
2. Carefully screw a customization module into one of the 4 available slots.
• Remove the module’s anti-static film first.
• Some modules take 2 slots. See module packaging for details.
3. Replace the customization interface cover.
• For best results, the mold should be at room temperature.
• Be sure to mop up any overflow.
7. Allow to cool naturally overnight. Do not refrigerate or freeze.

Here’s the code:

<ol>
  <li>Dissolve 500 grams of sugar into 2 liters of warm water.</li>
  <ul>
    <li>We recommend distilled water for best results.</li>
    <li>Use waste water from a nuclear power plant for a chance of mutant powers.</li>
  </ul>
  <li>While heating, slowly stir in the contents of the Spice packet.</li>
  <li>Boil for 3 minutes.</li>
  <li>Stir in the contents of the Everything Nice packet.</li>
  <ul>
    <li>Discard any broken items.</li>
    <li>Add computer chips to increase geekiness.</li>
    <li>A hot temper? Add tabasco sauce. But only a few drops!</li>
  </ul>
  <li>Simmer for 20 minutes.</li>
  <li>Carefully pour into mold.</li>
  <ul>
    <li>Your kit includes our popular Generon 110 mold. To customize the Generon 110:</li>
    <ol>
      <li>Remove the customization interface cover.</li>
      <li>Carefully screw a customization module into one of the 4 available slots.</li>
      <ul>
        <li>Remove the module's anti-static film first.</li>
        <li>Some modules take 2 slots. See module packaging for details.</li>
      </ul>
      <li>Replace the customization interface cover.</li>
    </ol>
    <li>For best results, the mold should be at room temperature.</li>
    <li>Be sure to mop up any overflow.</li>
  </ul>
  <li>Allow to cool naturally overnight. <em>Do not refrigerate or freeze.</em></li>
</ol>

Figure 3. Nested lists