Lists

After this lesson, you can create ordered and unordered lists, including a correctly related nested list.

BEGIN WITH A QUESTION

Understanding begins with a question.

Cooking ingredients can be purchased in different orders. Cooking steps may need a particular sequence. Two list types help readers understand when order matters.

Create ordered and unordered lists, including a correctly related nested list.

UNDERSTAND THE CONCEPT

Ul or ol?

Ul is an unordered list: order does not determine meaning, as with supplies. Ol is an ordered list: order matters, as with planting steps. Write each item as li inside ul or ol.

A nested list belongs inside an item

When a supply item has details, place the additional list inside that item's li. The child list must not sit beside li without a wrapping item. This parent–child relationship clearly associates details with an item.

Lists create recognizable patterns

Do not type hyphens or numbers into a single paragraph to imitate a list. List elements communicate grouping to browsers and assistive technology. Not every paragraph needs to become a list; use one for a series of items.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<h2>Supplies</h2>
<ul>
  <li>Pot</li>
  <li>Growing medium
    <ul><li>Soil</li><li>Compost</li></ul>
  </li>
</ul>
<h2>Planting steps</h2>
<ol>
  <li>Fill the pot with growing medium.</li>
  <li>Place the seed.</li>
  <li>Water lightly.</li>
</ol>

BROWSER RESULT

Supplies use ul; steps use ol. The Soil and Compost list belongs inside the Growing medium li.

COMMON MISTAKES

<ul>
  <li>Growing medium</li>
  <ul><li>Compost</li></ul>
</ul>

The child list must be inside the li it explains. Move the Growing medium </li> after the child list's closing tag.

TRY TOGETHER

Practice clarifies understanding.

Choose the element for three steps whose order matters.

<>
  <li>Prepare the pot.</li>
  <li>Add soil.</li>
  <li>Plant the seed.</li>
</ol>

Show a hint

Ordered list is abbreviated with two letters.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Prepare a reading club

Create a ul with at least two supplies. Add another ul with two details inside one li. Create a separate ol with at least three steps for starting a reading session.

<h2>Reading Club Supplies</h2>
<!-- Write the supply list -->
<h2>Session Sequence</h2>
<!-- Write the session steps -->

index.htmlHTMLLn 1, Col 14 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Ul groups items; ol sequences them.
Each item is marked with li.
A nested list belongs inside its parent li.

ListsHTML syntax

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML list °HTML element °

Library: Three languages behind one page ↗

Next lesson →