HTMLHTML · Lesson 4 of 8

Lists & Tables

Use lists when you have items. Use tables for tabular data. Do not use tables for layout — that was the 1990s. We don't talk about the 1990s.

HTML
<!-- Unordered list (bullet points) -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<!-- Ordered list (numbered) -->
<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

<!-- Nested lists -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Go</li>
      <li>Rust</li>
    </ul>
  </li>
</ul>

<!-- Description list — term and definition pairs -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the appearance of web pages</dd>
</dl>
HTML
<!-- Table — for tabular data only -->
<table>
  <caption>Programming Language Popularity</caption>

  <!-- Table head -->
  <thead>
    <tr>
      <th scope="col">Language</th>
      <th scope="col">Year Created</th>
      <th scope="col">Paradigm</th>
    </tr>
  </thead>

  <!-- Table body -->
  <tbody>
    <tr>
      <td>Python</td>
      <td>1991</td>
      <td>Multi-paradigm</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
      <td>Multi-paradigm</td>
    </tr>
    <tr>
      <td>Rust</td>
      <td>2010</td>
      <td>Systems</td>
    </tr>
  </tbody>

  <!-- Table foot (optional — good for totals/summaries) -->
  <tfoot>
    <tr>
      <td colspan="3">Source: Various</td>
    </tr>
  </tfoot>
</table>
◆ Note
The scope="col" attribute on <th> elements helps screen readers understand which column or row a header relates to. Always use it in tables with both row and column headers.