Lists and Tables

In this module, we move beyond simple text and explore how to organize complex data logically. Whether you are building a navigation menu or a pricing comparison, lists and tables are your core tools.

Lesson Path

Previous lesson: Images and Media
In this lesson: You learn to structure data for comparison and categorization.
Next lesson: Forms and Modern Inputs

1. Unordered and Ordered Lists

You've likely seen these before, but professional HTML uses them for more than just bullet points.

Unordered (<ul>): Used for sets of items where the order doesn't change the meaning (e.g., navigation links, social icons).
Ordered (<ol>): Used for sequential steps where the number matters (e.g., code execution steps, recipe instructions).

Pro Tip: Nested Lists

You can place a list inside another list to create sub-menus or hierarchical outlines.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

2. Description Lists (`<dl>`)

Often overlooked, the Description List is perfect for key-value pairs, metadata, or glossaries.

<dl>: The wrapper.
<dt>: The Term (the key).
<dd>: The Description (the value).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of the web.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the styling of the web.</dd>
</dl>

3. Accessible Data Tables

Tables should only be used for tabular data (like spreadsheets), never for layout. A pro-grade table includes structural elements that help screen readers.

Core Table Anatomy:

<thead>: Wraps the header row.
<tbody>: Wraps the main data.
<tfoot>: Wraps summary data (totals, etc.).
<th>: Header cell (use scope="col" or scope="row" for clarity).

Table StructureDescription ListsAccessibility Scope

HTML PLAYGROUND

⏳ Loading editor…

Live Preview

Real browser rendering