Organizing a complete page

Now combine text, links, tables and forms into a complete club event page. Divide content by purpose before choosing elements. Region names do not create columns or decorated cards; CSS will handle appearance later.

Introduction, content and closing information

header introduces a page or part of it. nav groups major navigation, not every small collection of links. main contains unique primary page content; use one visible main in an ordinary document. footer contains closing information. An article can have its own header and footer too.

<header>
  <h1>Weekend book club</h1>
  <nav><a href="#schedule">Schedule</a> <a href="#join">Join</a></nav>
</header>
<main>
  <section id="schedule">
    <h2>Schedule</h2>
    <p>We start at ten.</p>
  </section>
  <section id="join">
    <h2>Join</h2>
    <p>New readers are welcome.</p>
  </section>
</main>
<footer><p>Location: Reading Center</p></footer>

section, article and aside

section groups a theme, normally introduced by a heading such as Schedule. If you only need a styling wrapper without a distinct theme, div is often more appropriate.

article is relatively self-contained content, such as a book review or complete announcement. It may contain sections; a section may also contain articles. Choose nesting by content relationships, not a rigid template.

aside is related but supplementary content, such as further reading or a travel note. It does not automatically move to the right side. Without CSS it normally follows document order. Do not classify essential participation instructions as optional merely to get a sidebar.

Assemble and check

Start with the full document and its header, main and footer. Give main sections h2 headings and unique ids, then connect nav links. Use table for the schedule and form for registration. Check labels, names and button types. Never nest a form inside another form; group controls with fieldset instead.

The Lab offers a complete event page and a reading-note page. Read their source in order, try navigation and input, and inspect narrow wrapping. In your practice, check headings, destination ids, labels, captions and readability. A plain appearance is expected: you have built working structure, and CSS comes next.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weekend book club</title>
</head>
<body>
  <header>
    <h1>Weekend book club</h1>
    <nav><a href="#schedule">Schedule</a> · <a href="#join">Join</a></nav>
  </header>
  <main>
    <article>
      <h2>Nature reading day</h2>
      <p>Bring a favorite book and share a passage.</p>
    </article>
    <section id="schedule">
      <h2>Schedule</h2>
      <table>
        <caption>Saturday sessions</caption>
        <thead><tr><th scope="col">Time</th><th scope="col">Activity</th></tr></thead>
        <tbody><tr><td>10:00</td><td>Reading</td></tr><tr><td>14:00</td><td>Discussion</td></tr></tbody>
      </table>
    </section>
    <section id="join">
      <h2>Join us</h2>
      <form action="/register" method="post">
        <label for="reader">Your name</label>
        <input id="reader" name="readerName" type="text" required>
        <button type="submit">Check entries</button>
        <button type="reset">Reset form</button>
      </form>
    </section>
    <aside><h2>Travel note</h2><p>The nearby bus stop is Library Road.</p></aside>
  </main>
  <footer><p>Reading Center · New readers are welcome.</p></footer>
</body>
</html>