Lists

Lists communicate sequences, groupings, and term/definition pairs. Assistive technologies often announce how many items are in a list and how deeply lists are nested—so real list markup beats typing bullet characters in a paragraph.

Key terms

<ul> — unordered list

A list where item order does not carry meaning. Browsers show bullets by default.

<ol> — ordered list

A list where order matters (steps, rankings). Browsers show numbers or letters.

<li> — list item

The only direct child allowed inside ul or ol (besides script-support elements). Each li is one entry.

<dl>, <dt>, <dd>

A description list: dt names a term; dd gives its description (one or more per term).

Nesting

Put a nested ul/ol inside an li, not between li elements.

Example 1 — Unordered list (ul)

<ul>
  <li>Draft outline</li>
  <li>Peer review</li>
  <li>Publish</li>
</ul>

Rendered output

Example 2 — Ordered list (ol) with meaning

<ol>
  <li>Preheat oven to 180 °C.</li>
  <li>Mix dry ingredients.</li>
  <li>Bake 25 minutes.</li>
</ol>

Rendered output

Optional attributes (use when they match real meaning): start (begin at a given number), reversed (count down), type (numbering style where appropriate).

Example 3 — Description list (dl)

<dl>
  <dt>Latency</dt>
  <dd>Time until the first byte arrives.</dd>
  <dt>Throughput</dt>
  <dd>Data transferred per second.</dd>
</dl>

Rendered output

Example 4 — Nested lists

<ul>
  <li>Deploy checklist
    <ul>
      <li>Run tests</li>
      <li>Tag release</li>
    </ul>
  </li>
</ul>

Rendered output

Navigation

Site menus are often a ul inside nav: one landmark region, many items, styled as a row with CSS.

What developers accidentally break

• Fake lists in CMS rich text: marketing pastes Word HTML with manual bullets—sanitize or reauthor as real ul/ol.
• Icon lists without text: if list items are glyphs only, provide adjacent text or SR-only labels—decorative vs informative must be decided consciously.
• Deep nesting without affordance: five-level nested lists overwhelm audio readers—flatten structure or add sectional headings.

Important interview questions and answers

1. Q: What makes image delivery accessible and performant?
   A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs.
2. Q: When do you use a table in HTML?
   A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech.
3. Q: What is the role of the `head` element in production apps?
   A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.

Tip: Use ul/ol for navigation groups when items are parallel.