HTML List Container

Lists Content Relationships

Use list elements correctly. Individual List items can contain a variety of HTML elements, including Paragraph, Heading, Form elements, and other nested lists. There are three types of Lists: Unordered, Ordered, and Nested.

Using the Unordered List

Use unordered lists where there is no order of sequence or importance.

Example

<ul>
  <li>Corn</li>
  <li>Tomatoes</li>
  <li>Beans</li>
  <li>Onions</li>
  <li>Garlic</li>
</ul>

Output

  • Corn
  • Tomatoes
  • Beans
  • Onions
  • Garlic

Using the Ordered List

Use ordered lists to represent a progression or sequence.

Example

<ol>
  <li>Cook beans for 45 minutes.</li>
  <li>Cut vegetables in small cubes.</li>
  <li>Sault onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
</ol>

Output

  1. Cook beans for 45 minutes.
  2. Cut vegetables in small cubes.
  3. Sault onions and garlic.
  4. Deglaze using the tomatoes.
  5. Add corn and beans.

Using the Nested List Element

You can use Heading tags or ARIA Labels to identify multiple sublists.

Example

<ol>
  <li>Prepare ingredients
    <ul>
      <li>Cook beans for 45 minutes.</li>
      <li^>Cut vegetables in small cubes.</li>
    </ul>
  </li>
  <li>Sault onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
</ol>

Output

  1. Prepare ingredients
    • Cook beans for 45 minutes.
    • Cut vegetables in small cubes.
  2. Sault onions and garlic.
  3. Deglaze using the tomatoes.
  4. Add corn and beans.

Resources