3: Lists, Tables & Semantic HTML

Lists: ul, ol, li

Unordered (bullets)

Flour
Eggs
Milk

<ul>
  <li>Flour</li>
  <li>Eggs</li>
</ul>

Ordered (numbered)

Mix flour & eggs
Add milk slowly
Fry 2 min/side

<ol>
  <li>Mix...</li>
  <li>Add...</li>
</ol>

Gotcha: Only <li> can be a direct child of <ul>/<ol>. Don't do <ul><div><li>. Nest lists by putting <ul> inside an <li>.

<!-- nested list (correct) -->
<ul>
  <li>Fruit
    <ul><li>Apple</li><li>Banana</li></ul>
  </li>
</ul>

Tables

Tables are for tabular data, not layout. (We have flex/grid for that later.)

Ingredient	Amount	Notes
Flour	200g	AP or bread
Eggs	2	room temp
Milk	300ml	oat works

<table>
  <thead>
    <tr><th>Ingredient</th><th>Amount</th></tr>
  </thead>
  <tbody>
    <tr><td>Flour</td><td>200g</td></tr>
  </tbody>
</table>

<thead>/<tbody>, optional but helpful for semantics & styling.
<th> = header cell (bold, semantic), <td> = data cell.

Semantic HTML: tags that mean things

You could make everything a <div>. Please don't.

<header>: site or section header

<nav>: navigation links

<main>: primary content (one per page)

<section>: thematic grouping

<article>: self-contained (blog post, card)

<footer>: footnotes, copyright

<header>logo + nav</header>
<nav><a> links</nav>
<main>
  <section>
    <article>Self-contained thing</article>
  </section>
</main>
<footer>© 2026</footer>

Why it matters: Screen readers have shortcuts to jump between <nav>/<main>/<header>. SEO uses it. And "View Source" becomes skimmable, you can see structure, not 200 nested divs.

Quick test: div soup vs. semantic

This is div soup
<div class="header">
<div class="nav">
<div class="main">
<div class="post">
Semantic
<header>
<nav>
<main>
<article>

Live demo: a recipe with correct semantics

Fluffy Pancakes

By You · 20 min · Serves 4

Ingredients

200g flour
2 eggs
300ml milk

Steps

Whisk dry ingredients.
Add eggs & milk, mix until just combined.
Fry 2 min per side.

Exercise: Mark up a recipe or resume:

No CSS. Use only tags from Modules 01-03.

Wrap navigation in <nav>, main content in <main>.
Each recipe step / job entry = <section> or <article>.
Ingredients / skills = <ul>. Steps / timeline = <ol>.
At least one <table> (nutrition facts / skills matrix).

Validate: paste your HTML into validator.w3.org. Zero errors is the goal.

Prev2: Links & Paths Next4: Containers