Project final - Landing

Combine all sections, finalize and document the landing page.

Assemble the page

In the final step you assemble the page end to end. At the top of <body> you add <header> with a <nav> inside; menu links live there. After <main> comes <footer>; copyright and helper links go there.

Marking sections with  keeps the file readable.

HTML comments

HTML comments don't show in the browser but stay in the source file. They open with . Use them to mark sections, leave notes or temporarily hide code.

Text inside a comment is not rendered; only someone reading the source sees it. Don't overuse them; they bloat the file. Prefer short, meaningful notes.

Exercise Add header, nav, footer and a comment

Take the previous step's page with the pricing table. At the top of <body> add a <header>; inside it put a <nav> with at least two a links (with href). After <main> add a <footer> with a non-empty p (copyright text). Add at least one comment to the page (e.g. marking header and footer).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskFlow - Task management</title>
  </head>
  <body>
    <!-- Top menu -->
    <header>
      <nav>
        <a href="/">TaskFlow</a>
        <a href="/features">Features</a>
        <a href="/pricing">Pricing</a>
      </nav>
    </header>
    <main>
      <h1>Keep tasks in flow, not in mind</h1>
      <p>Manage your team's tasks, deadlines and progress from a single panel with TaskFlow.</p>
      <a href="/signup">Start free</a>
      <button>Request a tour</button>
      <section>
        <h2>Why TaskFlow?</h2>
        <article>
          <h3>Kanban boards</h3>
          <p>Move tasks with <strong>drag and drop</strong> and see the flow <em>live</em>.</p>
        </article>
        <article>
          <h3>Automatic reminders</h3>
          <p>Get <strong>email</strong> and <em>instant notifications</em> as deadlines approach.</p>
        </article>
        <ul>
          <li><strong>Calendar</strong> view</li>
          <li><strong>File</strong> attachments</li>
          <li><strong>Tag</strong> system</li>
        </ul>
      </section>
      <section>
        <h2>Plans</h2>
        <table>
          <caption>TaskFlow pricing</caption>
          <thead>
            <tr>
              <th>Plan</th>
              <th>Price</th>
              <th>Members</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Basic</td>
              <td>Free</td>
              <td>3</td>
            </tr>
            <tr>
              <td>Pro</td>
              <td>$9/mo</td>
              <td>Unlimited</td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
    <!-- Bottom info -->
    <footer>
      <p>© 2026 TaskFlow</p>
    </footer>
  </body>
</html>

TaskFlow landing complete

The TaskFlow landing page is complete! Over five lessons you built this structure:

Document skeleton and head settings
Hero section: tagline, pitch, action
Features: article cards and lists
Pricing: a captioned table
Header, nav, footer and comments

This is the skeleton of a real product page. Swap the content to fit your own product.

Test yourself

Which tag wraps the main content of a page?
- aside
- main
- header
- nav
Show answer

main — Correct. main wraps the page's primary content; there's one per page.
Write the markers that open an HTML comment
```
____ Top menu -->
```
Show answer
```

```
Match each structural tag to its role

header

Top section
nav

Navigation menu
main

Main content
footer

Bottom section

Next lesson: Col and colgroup

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies