Lists and Tables

Real pages group things: steps in a recipe, ingredients, a schedule, a price list. HTML has purpose-built structures for each.

Three kinds of lists

Unordered lists (<ul>) — the order does not matter:

<ul>
  <li>Flour</li>
  <li>Water</li>
  <li>Salt</li>
</ul>

Ordered lists (<ol>) — the order does matter. The numbering is generated by the browser, so you never type the numbers yourself:

<ol>
  <li>Preheat the oven to 220°C.</li>
  <li>Mix the dry ingredients.</li>
  <li>Add water and knead.</li>
</ol>

Description lists (<dl>) — term/description pairs, for glossaries and metadata:

<dl>
  <dt>HTML</dt>
  <dd>Structure and content of a page</dd>
  <dt>CSS</dt>
  <dd>Appearance and layout</dd>
</dl>

Rules that apply to all three: each entry is an <li> (or dt/dd), and lists may only directly contain their own children — a <p> cannot sit directly inside a <ul>; it belongs inside an <li>.

Choosing the right list

Ask one question: would the meaning change if the entries were shuffled? A shopping list — no, so <ul>. Recipe steps — yes, so <ol>. This is not pedantry: screen readers announce "list with 5 items" and, for ordered lists, announce positions — correct choice is invisible accessibility.

Tables are for data, never for layout

A <table> shows a grid of related data where rows and columns have meaning:

<table>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$9</td>
    </tr>
  </tbody>
</table>

• <tr> is a row; <th> is a header cell; <td> is a data cell.
• <thead>/<tbody> group the parts (one table, one each).
• scope="col" on a <th> tells assistive tech what the header applies to — it is how a screen reader can say "Price: $9" instead of reading the grid cell by cell.

Before CSS existed, people abused tables to lay out whole pages. Never do this: it destroys accessibility and breaks on every screen size. If it is not genuinely tabular data, it is not a table.

What you learned

• <ul>, <ol>, <dl> and when each is right
• Browser-generated numbering; entries are <li>
• Lists may only contain their own children
• <table> with thead/tbody, th scope, and the no-layout-tables rule

Next: semantic HTML — choosing elements for meaning.