Session 8 — Extra markup and HTML5 layout elements

You will finish the HTML half of the course with the page-structuring toolkit: div (block container) and span (inline container), the id (unique) and class (repeated) hooks, comments, head metadata, and the HTML5 semantic layout elements — header, nav, main, section, article, aside, footer — that name a page's regions instead of leaving them anonymous.

Plan: ideas → worked skeletons → bridge → short drills → reveal.

Time: about 55–65 minutes if you name every region (semantic element, or div with a reason) before reading the reveal.

Session 8 — Extra markup and HTML5 layout elements

The one-paragraph story

Every element so far has been content-shaped. This session adds the tools for page-shaped markup: div and span, the two generic containers (block and inline) with id/class hooks for CSS; comments; metadata in the head; and — most importantly — the HTML5 semantic layout elements (header, nav, main, article, section, aside, footer) that replace a pile of anonymous divs with labelled regions. The discipline is: reach for the semantic element that names the region, and use div only when no semantic element fits. This session finishes the HTML half of the course by giving the Harbor Café site its full page skeleton.

---

div and span: the generic containers

Two elements exist purely to group things when no other element fits:

<div class="menu-section">
  <h2>Coffee</h2>
  <p>House espresso, cappuccino, cold brew.</p>
</div>

div is a block container — a full-width box that can hold headings, paragraphs, lists, whole sections. span is its inline twin — it wraps a run of text inside a paragraph without breaking the line:

<p>The daily special is <span class="price">$9.00</span> until noon.</p>

div gives CSS a hook for layout and grouping; span gives CSS a hook inside a line. Without the class (or id) hooks, they change nothing visually — they are empty containers waiting for CSS.

---

id and class: the hooks

• id — a name for one element, unique on the page: id="hours". CSS addresses it with #hours. Also the target of #hours fragment links (Session 4).
• class — a name for many elements: class="price". CSS addresses it with .price. One element can carry several classes: class="price special".

The rule of thumb: a single, unique region gets an id; a repeated kind of thing gets a class. Both are just names — the CSS sessions (9 onward) are where they come alive.

---

Comments

Comments are notes for humans, invisible to visitors:

<!-- Header shared across all café pages -->
<header>…</header>

They cannot nest (a <!-- inside a comment does not work), and they are useful for marking sections, explaining a hack, or temporarily disabling a block.

---

Metadata in the head

The head collects page-wide information (Session 1):

<head>
  <meta charset="utf-8">
  <title>Harbor Café — Contact</title>
  <meta name="description" content="Contact the Harbor Café about catering and events.">
</head>

meta name="description" gives search engines a summary, charset declares the character set. title remains the one visible metadata: the browser tab and the search-result heading.

---

The HTML5 layout elements

A page is made of labelled regions, and HTML5 gives each a name:

• header — the top region: logo, site title, sometimes the nav.
• nav — the navigation links (usually a ul of links, as in Session 4).
• main — the page's core content, unique per page.
• section — a themed group inside a page (a menu section, a news block).
• article — a self-contained unit that could stand alone (a blog post, a menu item entry).
• aside — content loosely related to the main content (a sidebar: opening hours, a news snippet).
• footer — the bottom region: copyright, contact links, fine print.

<body>
  <header>
    <img src="images/logo.png" alt="Harbor Café">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Welcome to the Harbor Café</h1>
    <p>Fresh coffee on the waterfront.</p>

    <section>
      <h2>Today's specials</h2>
      <p>Salmon chowder, beet tart, cardamom twist.</p>
    </section>
  </main>

  <aside>
    <h2>Opening hours</h2>
    <p>Daily, 7:00–15:00.</p>
  </aside>

  <footer>
    <p>© 2026 Harbor Café. Est. 2016.</p>
  </footer>
</body>

Read the regions top to bottom: header (logo + nav), main (the page's core: heading, paragraphs, a section), aside (hours), footer (copyright). Every region is named — a screen reader can jump between them, and CSS can style each one independently.

---

Semantic elements over div soup

The old way was dozens of anonymous divs with classes like class="top" and class="left":

<!-- Old-style div soup -->
<div class="top">
  <div class="menu">…</div>
</div>

The HTML5 way replaces the divs with named regions — header, nav, main, footer. The names are the point: they give every region a meaning, not just a style. When you mark up a page, ask "what is this region for?" first — header, nav, main, section, article, aside, or footer — and fall back to div only when none of them fit. If section and div both seem possible, prefer section (or article when the content could stand alone).

---

Pitfalls to watch for

• div when a semantic element fits — a top banner is a header, not a div with a class.
• span around block content — span is inline; wrapping a heading in a span is a structural error (it is legal in HTML5 if CSS changes its display, but confusing).
• Duplicate ids — an id must be unique; repeated regions need classes.
• Forgetting the page needs main — exactly one main per page marks the core content.

Session 8 — Worked examples

Example A — The full Harbor Café page skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Harbor Café — Home</title>
</head>
<body>
  <header>
    <img src="images/logo.png" alt="Harbor Café">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Welcome to the Harbor Café</h1>
    <p>Fresh coffee on the waterfront, roasted weekly on the pier.</p>

    <section id="specials">
      <h2>Today's specials</h2>
      <ul>
        <li>Salmon chowder</li>
        <li>Beet tart</li>
        <li>Cardamom twist</li>
      </ul>
    </section>
  </main>

  <aside>
    <h2>Opening hours</h2>
    <p>Daily, 7:00–15:00.</p>
  </aside>

  <footer>
    <p>© 2026 Harbor Café. Est. 2016.</p>
  </footer>
</body>
</html>

Regions, top to bottom:

1. header — logo image + nav (a ul of links, Session 4).
2. main — the page's core: h1, a paragraph, and a section carrying id="specials" (a unique hook — useful for a #specials jump link and for CSS).
3. aside — hours, loosely related sidebar content.
4. footer — copyright.

Every named region is both a semantic label and a future CSS hook.

---

Example B — div when nothing semantic fits

Sometimes content genuinely has no semantic name — a card that repeats across a gallery:

<section>
  <div class="card">
    <img src="images/thumb-espresso.jpg" alt="A house espresso">
    <p class="card-title">House espresso</p>
    <p class="price">2.50</p>
  </div>
  <div class="card">
    <img src="images/thumb-latte.jpg" alt="A latte in a glass">
    <p class="card-title">Latte</p>
    <p class="price">3.40</p>
  </div>
</section>

The section names the group; the repeated div.card elements are generic containers whose class does the labelling. No semantic element means "a small card", so div is the right tool — and CSS will style .card in Session 13+.

---

Example C — span as an inline hook

<p>The lunch deal is <span class="deal-price">$12</span> for a sandwich and a coffee.</p>

The span wraps one phrase inside the paragraph. Later CSS can colour .deal-price differently without touching the rest of the sentence. Note the difference from a div: a span does not break the line.

---

Example D — id vs class

<main id="home-content">
  <h2 class="section-title">Our story</h2>
  <h2 class="section-title">Our beans</h2>
</main>

• id="home-content" — unique: only the home page's main region has it. CSS: #home-content.
• class="section-title" — repeated: both headings share it. CSS: .section-title.

The rule: unique → id, repeated → class.

---

Example E — Section vs article

<section>
  <h2>News</h2>
  <article>
    <h3>New roastery opens</h3>
    <p>The pier roastery reopens this Friday after repairs.</p>
  </article>
  <article>
    <h3>Winter menu launch</h3>
    <p>Cardamom twist returns, and a new pumpkin latte joins the board.</p>
  </article>
</section>

The section is the themed group ("News"); each article is a self-contained news item that could stand alone on its own page. If the item could be lifted out and still make sense, it is an article; if it is just a themed chunk inside a page, it is a section.