Lists and tables

Three kinds of lists, and building data tables that are semantically correct instead of layout hacks.

The three list types

<ul>
  <li>Unordered: order does not matter</li>
</ul>

<ol>
  <li>Ordered: sequence matters</li>
  <li>Second step</li>
</ol>

<dl>
  <dt>HTML</dt><dd>Structure of a web page</dd>
  <dt>CSS</dt><dd>Appearance of a web page</dd>
</dl>

• ul — bullet list; the only legal children are li.
• ol — numbered; control numbering with CSS, or start/reversed attributes.
• dl — description list of term/definition pairs; ideal for glossaries and metadata.

Lists may nest: put the child ul inside the li it belongs to, not beside it.

Tables are for data only

Use a table when you genuinely have rows and columns of data. Never use one for page layout — it breaks flexibility, accessibility, and mobile rendering.

<table>
  <caption>Monthly active users</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Users</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">July</th><td>1,204</td></tr>
    <tr><th scope="row">August</th><td>1,471</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>2,675</td></tr>
  </tfoot>
</table>

• thead/tbody/tfoot group rows semantically (and let you style them separately).
• th with scope tells assistive tech whether the header applies to its column or row.
• caption is the table's accessible title — better than a nearby heading.
• colspan/rowspan merge cells; use sparingly, they complicate navigation.

FAQ

Related

Forms and inputs Semantic layout

Last refreshed 2026-09-17.