Build a small page

A complete one-page site for a neighbourhood bakery fits in about 50 lines of HTML, and every element in it comes from the last nine units.

Plan before you type

Before writing any HTML, write down what the page has to say, in plain words and in order. For a small bakery that might be: the name, a short menu of links, what is baked today, the opening hours, a picture of the bread, a way to sign up for news, and the address. Each item then suggests an element: the name is an <h1> in a <header>, the links go in a <nav>, the hours are a table, the bread list is a <ul>, the sign-up is a form, and the address goes in the <footer>. Planning content first is what professional teams do too; the HTML follows from it.

The finished structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Two lines in the head are new. <meta name="viewport" content="width=device-width, initial-scale=1"> tells phones to use the real screen width instead of pretending to be a desktop screen and shrinking the page; the CSS course explains it in the unit on responsive design. The menu is a list of links inside <nav>, which screen readers announce as navigation, list, 3 items. Each menu link points to the id of a section, so the page works as a single scrolling document.

Check it like a reviewer

When the page is written, go through it the way a careful reviewer would. Read only the headings: do they tell the story of the page? Press Tab from the top: can you reach every link and form field, in a sensible order, and can you see where the focus is? Look at every image: does its alt text say what would be lost without it, or is it empty because the image is decoration? Click every label: does it focus its field? Finally, paste the page into the W3C Markup Validation Service at validator.w3.org, which lists mistakes such as unclosed elements or duplicate ids.

The page will look plain: black text on white, blue links, the browser's default fonts. That is fine and even useful. A page with good HTML is already readable on every device, works with a keyboard and a screen reader, and can be printed. The CSS course starts from exactly this kind of page and adds colour, spacing and layout on top, without changing a line of the HTML.

Build it in small steps

Write the page in small steps and look at the result after each one: the skeleton first, then the header and menu, then one section at a time. If something looks wrong, you only have a few new lines to check. On your own computer, save the file as index.html and open it by double-clicking; the browser shows it straight from the disk. To publish it, you upload the same file to a web host, and the server sends it to anyone who asks for the address, the same way the first unit began.