Lists

Introduction

Lists group related items: navigation links, setup steps, feature bullets, and glossary terms. HTML provides three list types—unordered, ordered, and description lists—each with clear semantics. This chapter shows when to use each and how to nest them without breaking structure.

Prerequisites

• Links and navigation
• Block, inline, and semantic flow

Unordered Lists

Use <ul> when order does not matter:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Browsers show bullets by default. CSS changes markers later (list-style-type).

Navigation menu

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="docs.html">Docs</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Lists announce item count to assistive technology—helpful for menus.

Feature list

<section>
  <h2>Why learn HTML</h2>
  <ul>
    <li>Works in every browser</li>
    <li>Pairs with CSS and JavaScript</li>
    <li>Improves accessibility and SEO</li>
  </ul>
</section>

Ordered Lists

Use <ol> when sequence matters:

<ol>
  <li>Install a browser and editor.</li>
  <li>Create <code>index.html</code>.</li>
  <li>Open the file with Live Server.</li>
  <li>Inspect the page in DevTools.</li>
</ol>

start and reversed

Start at a specific number:

<ol start="5">
  <li>Step five</li>
  <li>Step six</li>
</ol>

Countdown:

<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

type attribute (legacy style)

<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>

Prefer CSS list-style-type for new projects; type still works for quick letters or Roman numerals.

Description Lists

<dl> (description list) pairs terms with explanations:

<dl>
  <dt>HTML</dt>
  <dd>Markup language for document structure.</dd>
 
  <dt>CSS</dt>
  <dd>Stylesheet language for presentation.</dd>
 
  <dt>DOM</dt>
  <dd>In-memory tree built from HTML.</dd>
</dl>

Good for:

• glossaries
• metadata (label / value)
• FAQ where the question is the term

Multiple <dd> per <dt> are allowed:

<dl>
  <dt>Port</dt>
  <dd>8080 — development server</dd>
  <dd>443 — HTTPS</dd>
</dl>

Nesting Lists

Place a new list inside <li> when an item has sub-items:

Wrong pattern—sibling list without wrapping <li>:

<!-- Incorrect -->
<ul>
  <li>Frontend</li>
  <ul>
    <li>HTML</li>
  </ul>
</ul>

Ordered inside unordered (or the reverse) is fine when the inner sequence matters:

<ol>
  <li>Prepare environment
    <ul>
      <li>Install browser</li>
      <li>Install VS Code</li>
    </ul>
  </li>
  <li>Write first page</li>
</ol>

Lists and Paragraphs

Long list item content can include paragraphs:

<ul>
  <li>
    <p><strong>Semantic HTML</strong> describes meaning.</p>
    <p>It helps SEO and screen readers.</p>
  </li>
</ul>

Do not put a lone <p> around the entire list—put <ul> or <ol> directly under the section heading.

Choosing the Right List Type

Do not fake lists with manual bullets in paragraphs:

<!-- Avoid -->
<p>- Item one<br>- Item two</p>

Use real list elements so structure is machine-readable.

Mini Exercise

Build a “Getting Started” section with:

1. An ordered list of four setup steps
2. A nested unordered list under one step (tools to install)
3. A description list of three HTML terms you learned
4. A nav bar using <nav> + <ul> + links

Validate in DevTools: list items should appear as <li> children, not loose text nodes.

FAQ

Can I put headings inside <li>?

Yes for long items:

<li>
  <h3>Chapter 1</h3>
  <p>Content...</p>
</li>

Ensure heading levels fit the page outline.

Are description lists only for dictionaries?

No. Any name/value or question/answer pairs fit <dl>, including product specs and API field summaries.

How do I remove bullets?

That is CSS (list-style: none), not a reason to avoid <ul>. Navigation often hides bullets visually but keeps the list markup.

Can lists contain forms or buttons?

Yes, when each item is an interactive row. Keep one focusable control per item when possible for keyboard clarity.

What comes next?

Tables — tabular data with <table>, headers, and accessibility.