Lesson 20: Nested Lists

Overview

In this HTML lesson, we demonstrate how to nest lists inside each other. First, we demonstrate the proper format for nesting lists and give an example of nested unordered lists. Next, we show how to nest ordered lists and change their markers to create an outline. Then we give an example of a mixed ordered and unordered nested list. Finally, we give a demonstration of several ways to nest an ordered list inside a definition list.

Nested List Format

Nested lists make up the fourth type of list, after ordered, unordeded, and defintion lists. They are created by nesting list elements within list items. This example demonstrates how to create a nested unordered list. When we create a nested list, the internal list is inserted inside the containing element at the end of it. Note that the markers for the list items change at each level for unordered lists, up to the third level.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li>Group<ul>
        <li>Identity<ul>
          <li>1*x = x</li>
          <li>x*1 = x</li>
        </ul></li>
        <li>Inverses<ul>
          <li>x*y = 1</li>
          <li>y*x = 1</li>
        </ul></li>
        <li>Associativity<ul>
          <li>x*(y*z) = (x*y)*z</li>
        </ul></li>
        <li>Closure<ul>
          <li>x*y &in; G</li>
        </ul></li>
      </ul></li>
      <li>Ring<ul>
        <li>Identity +</li>
        <li>Commutativity +</li>
        <li>Inverses +</li>
        <li>Associativity +</li>
        <li>Closure +</li>
        <li>Identity &times;</li>
        <li>Associativity &times;</li>
        <li>Closure &times;</li>
        <li>Distributivity</li>
      </ul></li>
    </ul>
  </body>
</html>

Output

Nested Ordered Lists

Just like unordered lists, we can nest ordered lists within each other. This is ideal for creating outlines, as we do here. However, the default markers for ordered lists are standard decimal numbers. So, we need to change those at each level to create a proper outline by using the type attribute.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol type="I">
      <li>The Creed</li>
      <li>The Sacraments</li>
      <li>The Commandments</li>
      <li>The Lord's Prayer<ol type="A">
        <li>Opening Words<ol type="1">
          <li>"Our"</li>
          <li>"Father"<ol type="a">
            <li>Creation</li>
            <li>Providence</li>
          </ol></li>
          <li>"Who art in Heaven"</li>
        </ol></li>
        <li>Petitions</li>
        <li>The Seal</li>
      </ol></li>
    </ol>
  </body>
</html>

Output

Mixed Nested Lists

In addition to nested lists of unordered and ordered items, we can mix the two types together, as we do here. The outside list is an ordered list of sacrament classes. Inside of each of these, we have an unordered list of sacraments.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol>
      <li>Initiation<ul>
        <li>Baptism</li>
        <li>Eucharist</li>
        <li>Confirmation</li>
      </ul></li>
      <li>Healing<ul>
        <li>Penance</li>
        <li>Anointing of the Sick</li>
      </ul></li>
      <li>Service<ul>
        <li>Holy Orders</li>
        <li>Holy Matrimony</li>
      </ul></li>
    </ol>
  </body>
</html>

Output

Nesting within Definition Lists

When creating definition lists with multiple definitions for each term, the list can become messy. It would be good to have clean method of formatting multiple definitions with either a nested ordered or unordered list. This, however, proves to be difficult. So, we have offered three methods to show how this might be accomplished, along with the suggestion that using an ordered or unordered list, instead of a defintion list, might be prefereable in this case.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>make</dt>
      <dd><ol>
        <li>to fashion into being</li>
		<li>to put together</li>
		<li>to cause to exist</li>
        <li>to cause to become</li>
      </ol></dd>
      <dt>make<ol>
        <li>to fashion into being</li>
        <li>to put together</li>
        <li>to cause to exist</li>
        <li>to cause to become</li>
      </ol></dt>
      <ol><dt>make</dt>
        <dd><li>to fashion into being</li>
        <li>to put together</li>
        <li>to cause to exist</li>
        <li>to cause to become</li></dd>
      </ol>
    </dl>
  </body>
</html>