Nested and Description Lists

You can place a list inside another list item to create a nested list, useful for showing subcategories or sub-steps.

There is also a third type of list called a description list, used for pairing terms with their definitions, like a small glossary.

<ul>

  <li>Fruits

    <ul>

      <li>Apple</li>

      <li>Banana</li>

    </ul>

  </li>

</ul>

 

<dl>

  <dt>HTML</dt>

  <dd>The markup language used to structure web pages.</dd>

</dl>

Explanation: In the nested example, the inner ul sits completely inside one li of the outer list. In the description list, dl wraps the list; dt holds the term, and dd holds its definition right underneath it.