Build a simple HTML website

Plan the site

Pick a real or imagined local business. This example uses a bakeshop in Legazpi.

mayon-bakeshop/
  index.html        Home: intro, best sellers, map
  menu/index.html   Menu: price table
  contact/index.html Contact: form, address, hours
  images/
    logo.svg
    pili-tarts.webp

Write one sentence of purpose for each page and the main keyword it targets, like pili tarts Legazpi for the homepage.

Build the homepage

<!DOCTYPE html>
<html lang="en-PH">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh Pili Tarts in Legazpi | Mayon Bakeshop</title>
  <meta name="description" content="Fresh pili tarts baked daily in Legazpi City. ₱25 per piece, boxes of 12, same day delivery around Albay. Order online or visit our shop.">
  <link rel="canonical" href="https://mayonbakeshop.example/">
  <link rel="icon" href="/images/logo.svg">
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>
  <header>
    <a href="/"><img src="/images/logo.svg" alt="Mayon Bakeshop home" width="160" height="48"></a>
    <nav aria-label="Main">
      <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/menu/">Menu</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <h1>Fresh pili tarts, baked daily in Legazpi</h1>
    <p>Buttery crust, sweet pili filling, made every morning since 2015.</p>
    <figure>
      <img src="/images/pili-tarts.webp" alt="A box of twelve golden pili tarts" width="1200" height="800">
      <figcaption>Our best seller: the classic pili tart.</figcaption>
    </figure>
    <section>
      <h2>Why customers order from us</h2>
      <ul>
        <li>Baked fresh every morning</li>
        <li>Same day delivery around Legazpi and Daraga</li>
        <li>Cash on delivery or GCash</li>
      </ul>
    </section>
    <section>
      <h2>How to order</h2>
      <ol>
        <li>Check our <a href="/menu/">menu and prices</a>.</li>
        <li>Send an order through our <a href="/contact/">contact form</a>.</li>
        <li>We confirm by text within one hour.</li>
      </ol>
    </section>
  </main>
  <footer>
    <p>Mayon Bakeshop, Rizal Street, Legazpi City, Albay</p>
    <p><a href="tel:+639171234567">0917 123 4567</a></p>
    <p>&copy; 2026 Mayon Bakeshop</p>
  </footer>
</body>
</html>

Copy the same head, header, and footer into the Menu and Contact pages. Change the title, description, canonical, h1, and the aria-current link on each.

Build the menu and contact pages

For menu/index.html, use the accessible table from Lesson 6.3: a caption, th with scope for columns and items, and prices in td cells. For contact/index.html, use the contact form from Lesson 7.4, the address in text, opening hours in a description list, and a Google Map iframe with a title and lazy loading.

Validate your HTML

Validation checks your code against the HTML standard. Go to the W3C Markup Validation Service at validator.w3.org. Use Validate by Direct Input to paste your code, or Validate by URI once the site is online.

Validator message	What it means	Fix
End tag for p seen, but there were open elements	A tag inside was not closed	Close inner tags before outer ones
An img element must have an alt attribute	Missing alt	Add alt text, or alt="" if decorative
Duplicate ID	Two elements share an id	Make every id unique
Stray end tag div	An extra closing tag	Delete it or add the missing opening tag
Element li not allowed as child of element div	li outside a list	Wrap items in ul or ol
The for attribute of the label must refer to a form control	Label and id do not match	Match for and id exactly

Fix errors from the top down. One unclosed tag can cause many errors further down, so after fixing the first few, validate again. Warnings are suggestions. Errors should all be fixed.

Review the basic SEO elements

Check	Pass if
Title tag	Unique per page, keyword first, under 60 characters
Meta description	Unique, 120 to 160 characters, clear reason to click
One h1	Describes the page and matches the title topic
Heading order	h2 and h3 in order, no skipped levels
Alt text	Every meaningful image described
Internal links	Every page links to the others with clear anchor text
Canonical	Absolute, self-referencing URL on each page
Mobile	Viewport tag present, readable on a phone
Lighthouse	Run SEO and Accessibility audits in Chrome DevTools and fix issues

Validate your page with the W3C validator

Try it: find the errors

This homepage has six validation errors: an unclosed tag, a missing alt, a duplicate id, a stray li, an unlinked label, and a missing lang. Fix them all, then check the SEO elements.

Quick quiz

Common mistakes

• Copying the homepage title to every page. Update title, description, canonical, and h1 on each page.
• Ignoring the validator because the page looks fine. Browsers hide errors that can break screen readers and future CSS.
• Publishing with a staging noindex. Remove noindex before launch.
• Forgetting mobile testing. Check every page on a real phone.

Your action

Tick each item when you can do it. Your progress saves on this device.