HTML Lists

HTML Lists

There are three types of lists in HTML namely  unordered lists, ordered lists, and description lists. A description list has a different structure compared to its counterparts. Unordered and ordered lists are similar only that the in the former, data is presented randomly in a disorganized way.

Unordered, ordered, and Description Lists

An unordered list is initiated using the <ul> tag, where each item is enclosed by the tags in the <li> element. Ordered lists are created in the same way as unordered lists although they are initiated using the <ol> tag. As stated earlier the structure of a description list is different – they are initiated using the <dl> tag. For list items, use the <dt> tag to denote an item and the <dd> tag for its description. Below are examples that demonstrate how to create all three types of HTML lists.

Unordered HTML List

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Nested HTML Lists

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>