Lesson 4 of 8

Lists & Tables

You'll learn how to mark up ordered and unordered , and how to build tables for tabular data. Tables are for data only, not for page layout.

<!-- 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>
Sandboxed page
<!-- 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>
Sandboxed page
Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.