Frontend Master

JavaScript Curriculum

Lists and Structure
+40 XP

Lists and Structure

easy
~22 min·40 XP

The Nexus docs team needs structured content: a step-by-step setup guide, a features list, and a glossary. Each requires a different list type. Get the markup right and the content is already half-designed.

Lists and Structure

Lists are everywhere in web content — navigation menus, step-by-step guides, feature comparisons, glossaries. HTML gives you the right tool for each job. Reaching for the wrong list type is a semantic error, not just a style choice.

Three List Types, Three Purposes

lists.html

ul list-style-type

ol list-style-type

<ul>unordered
  • Espresso
  • Cappuccino
  • Latte
  • Cold Brew

Order doesn't matter — features, ingredients, options

<ol>ordered
  1. Espresso
  2. Cappuccino
  3. Latte
  4. Cold Brew

Order matters — steps, rankings, instructions

<dl>description
Espresso
Concentrated coffee brewed under pressure
Cappuccino
Espresso with steamed and foamed milk
Cold Brew
Coffee steeped in cold water for 12–24 hours

Term–definition pairs — glossaries, metadata

ℹ️Why Semantic List Choice Matters
A numbered list (`<ol>`) tells browsers, screen readers, and search engines that **order matters**. If you use `<ol>` for a feature list where order is arbitrary, you're claiming a false relationship. Users with screen readers hear "list of 5 items" before and after every list — the number prefix in `<ol>` communicates a sequence, so use it intentionally.

Nested Lists

Lists can be nested to create hierarchical structures. The key rule: the nested list always lives inside a <li> element, never directly inside <ul> or <ol>.

nested-list.html

Hover items to nest or delete

─Hot Drinks
─Espresso
─Cappuccino
─Cold Drinks
─Cold Brew
─Iced Latte

Generated HTML:

<ul>
  <li>Hot Drinks
    <ul>
      <li>Espresso</li>
      <li>Cappuccino</li>
    </ul>
  </li>
  <li>Cold Drinks
    <ul>
      <li>Cold Brew</li>
      <li>Iced Latte</li>
    </ul>
  </li>
</ul>
html
<!-- ✓ Correct nesting — nested ul is inside the li --> <ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> </ul> </li> <li>Backend</li> </ul> <!-- ✗ Invalid — nested ul directly inside outer ul --> <ul> <li>Frontend</li> <ul> <li>HTML</li> <!-- Wrong! This ul must be inside a li --> </ul> </ul>
⚠️Nesting Depth
Avoid nesting more than 2–3 levels deep. Deeply nested lists become hard to navigate with keyboard and screen reader. If you need more structure, consider headings + lists instead of deeply nested lists.

list-style-type: The Complete Reference

CSS lets you customise the marker on any list item with list-style-type. Explore the full range:

list-markers.html

Rendered:

  • First item
  • Second item
  • Third item

CSS rule:

ul {
list-style-type: disc;
}

Default for unordered lists. A filled circle — clear and readable at all sizes.

The Description List: dl, dt, dd

The <dl> (description list) is the most underused list element. It's perfect for glossaries, FAQs, and metadata:

html
<dl> <dt>Viewport</dt> <dd>The visible area of a web page in the browser window.</dd> <dt>DOM</dt> <dd>Document Object Model — the browser's in-memory representation of the HTML document as a tree of nodes.</dd> <dt>Semantic HTML</dt> <dd>Using HTML elements according to their meaning, not their default appearance.</dd> </dl>

A <dt> (description term) can have multiple <dd> (description details) elements — useful for terms with multiple meanings or multiple examples.

Challenge

Build a structured Nexus documentation snippet: an ordered list of installation steps (at least 3), a nested unordered list of features with sub-features, and a description list defining three technical terms.

ulollidldtddnested-listslist-style
Lists and Structure | Nexus Learn