Project: Product Landing Page

Introduction

A product landing page is designed to explain value quickly and guide users toward an action. In HTML terms, that means a strong heading, semantic sections, feature lists, comparison tables, calls to action, and an FAQ. This project focuses on structure; CSS can make it beautiful later.

Prerequisites

Project Goal

Build a landing page with:

  • site header and navigation
  • hero section
  • feature list
  • comparison table
  • CTA links/buttons
  • FAQ with <details> and <summary>
  • accessibility checks

Suggested file:

text
landing-page/
└── index.html

Page Skeleton

Header and Navigation

html
<header>
  <p><a href="index.html">LaunchKit</a></p>
  <nav aria-label="Main">
    <a href="#features">Features</a>
    <a href="#comparison">Comparison</a>
    <a href="#faq">FAQ</a>
    <a href="#signup">Start free</a>
  </nav>
</header>

The nav links jump to page sections. Each target needs a matching id.

Hero Section

The hero should make the product and action obvious:

html
<section aria-labelledby="hero-heading">
  <h1 id="hero-heading">Build clean landing pages faster</h1>
  <p>
    LaunchKit gives small teams a semantic HTML starter structure for product
    pages, docs, and signup flows.
  </p>
  <p>
    <a href="#signup">Start free</a>
    <a href="#features">See features</a>
  </p>
</section>

If the links navigate to other pages, <a> is correct. If a control opens a modal on the same page, use <button>.

Feature List

Feature bullets work well as a list because users scan them quickly.

Comparison Table

Use tables for real comparisons. Do not use tables just to create columns.

Signup CTA

html
<section id="signup" aria-labelledby="signup-heading">
  <h2 id="signup-heading">Start building today</h2>
  <p>Create your first semantic landing page in less than an hour.</p>
  <p><a href="signup.html">Create a free account</a></p>
</section>

The call to action should be descriptive. "Create a free account" is clearer than "Click here."

FAQ with details

details and summary give you a native disclosure widget without custom JavaScript.

Complete Main Structure

Accessibility Checks

  • Header nav links jump to valid IDs
  • One clear h1
  • Feature list uses real <ul> / <li>
  • Comparison table has caption, th, and scope
  • CTA text describes the destination/action
  • FAQ summaries are understandable when read alone
  • Page can be navigated by keyboard

Upgrade Ideas

  • Add an Open Graph image for sharing
  • Add a product screenshot with <figure>
  • Add a signup form using chapters 15–18
  • Add CSS later for hero layout, cards, and table styling

FAQ

Should the hero be a <header> or <section>?

Both can be reasonable. In this project, the site header is <header> and the hero is a page section inside <main>.

If it navigates to another page or section, use <a>. If it opens a modal or submits something on the same page, use <button>.

Can the FAQ use headings instead of details?

Yes. details is useful when answers are optional or collapsible. Plain headings and paragraphs are also valid.

Does this page need a form?

Not necessarily. A landing page can link to a signup page. Chapter 34 builds the registration form separately.

What comes next?

Project: registration form — build a realistic form with inputs, validation, groups, help text, and accessibility.