Lists and Tables

Lists describe related items. Tables describe relationships across rows and columns. Using either for visual indentation or page layout throws that meaning away.

Choose the right list

Use ul when order does not matter, ol when it does, and dl for name-value pairs.

01<ol>
02  <li>Create the HTML file.</li>
03  <li>Add meaningful structure.</li>
04  <li>Open it in a browser.</li>
05</ol>
06
07<dl>
08  <dt>HTML</dt>
09  <dd>Describes the content.</dd>
10  <dt>CSS</dt>
11  <dd>Controls the presentation.</dd>
12</dl>

Lists may be nested when an item genuinely contains a sub-list. Keep the child list inside its parent li.

Mark up data tables

01<table>
02  <caption>Course progress</caption>
03  <thead>
04    <tr><th scope="col">Course</th><th scope="col">Lessons</th></tr>
05  </thead>
06  <tbody>
07    <tr><th scope="row">HTML</th><td>8</td></tr>
08    <tr><th scope="row">CSS</th><td>10</td></tr>
09  </tbody>
10</table>

The caption names the table. Header cells and scope make the row-column relationship explicit.

Keep this

Use lists for groups or sequences and tables only when cells have meaningful row and column relationships.