There are 3 types of lists. Most often, we use unordered and ordered lists.

1. Unordered List
2. Ordered List
3. Definition List

Unordered List

For grouping a collection of items that do not have a numerical ordering. Their order in the list is meaningless.

<ul>
  <li>flour</li>
  <li>sugar</li>
  <li>baking powder</li>
  <li>salt</li>
  <li>non-dairy milk</li>
  <li>apple cider vinegar</li>
  <li>vanilla</li>
</ul>

Output

• flour
• sugar
• baking powder
• salt
• non-dairy milk
• apple cider vinegar
• vanilla

Ordered List

For an ordered list of items, typically rendered as a numbered list. Here, the order is meaningful.

<ol>
  <li>In a bowl, mix all the dry ingredients.</li>
  <li>In another bowl, mix together the rest.</li>
  <li>Wisk together.</li>
  <li>Wait 5 minutes.</li>
  <li>Cook the pancakes.</li>
</ol>

Output

1. In a bowl, mix all the dry ingredients.
2. In another bowl, mix together the rest.
3. Wisk together.
4. Wait 5 minutes.
5. Cook the pancakes.

Definition List

For creating a list of groups of terms and descriptions. It can be used as a list of key-value pairs. Common uses for this element are to implement a glossary or to display metadata.

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms) and <dd> (describes each term).

<dl>
  <dt>Content</dt>
  <dd>A state of satisfaction & happiness</dd>
</dl>

Output

Content

A state of satisfaction & happiness

Using ul, ol & li

Navigation Menu

Table of Content (toc)

<h1 class="page-title">Bees</h1>

<section id="toc">
<h3 class="toc-title">Table of Contents</h3>
<ol>
  <li><a href="#beekeeping">Beekeeping</a></li>
  <li><a href="#art-and-lit">In art and literature</a></li>
  <li><a href="#thoughts">Thoughts on bees</a></li>
  <li><a href="#kinds-of-bees">Kinds of bees</a></li>
</ol>
</section>

<section id="beekeeping">
  <h2 class="subheadline">Beekeeping</h2>
  <p>Humans have kept honey bee colonies, commonly in hives, for millennia. Beekeepers collect honey, beeswax, propolis, pollen, and royal jelly from hives; bees are also kept to pollinate crops and to produce bees for sale to other beekeepers.</p>
  <p>Depictions of humans collecting honey from wild bees date to 15,000 years ago; efforts to domesticate them are shown in Egyptian art around 4,500 years ago.<sup class="footnote">[91]</sup> Simple hives and smoke were used; jars of honey were found in the tombs of pharaohs such as Tutankhamun. From the 18th century, European understanding of the colonies and biology of bees allowed the construction of the moveable comb hive so that honey could be harvested without destroying the colony.</p>
<section>
  
<section id="art-and-lit">
  <h2 class="subheadline">In art and literature</h2>
  <h3 class="poem-title">Bee An Apple</h3>
  <p class="byline">by Paul Cameron Brown</p>
  <pre class="poem">
      The taste of an apple,
        the cringing of a bee
      as sun stops turning
        a ladle over their skins;
      the fire gold stains
        on apple's skin,
      the honey yellow, black bits
        a hornet wrinkles in.
  </pre>
  </section>
  
<section id="thoughts"> 
  <h2 class="subheadline">Thoughts on bees</h2>
  <blockquote class="quote">I’ve said this over and over, but I’ll say it a million more times — I’m concerned more about the death of a bee than I am about terrorism. Because we’re losing hives and bees by the millions because of such strong pesticides.
    <cite class="byline">Patty Smith</cite>
  </blockquote>
</section>

<section id="kinds-of-bees">
  <h2 class="subheadline">Kinds of Bees</h2>
  <ul>
    <li>honey bees</li>
    <li>bumble bees</li>
    <li>leafcutter bees</li>
    <li>mason bees</li>
    <li>mining bees</li>
    <li>flower bees</li>
  </ul>
</section>

Output

      The taste of an apple,
        the cringing of a bee
      as sun stops turning
        a ladle over their skins;
      the fire gold stains
        on apple's skin,
      the honey yellow, black bits
        a hornet wrinkles in.
  

Styling List Element (with css)