HTML document structure: 6 example pages to copy

Every HTML page starts from the same skeleton, but what goes inside the body changes with the job the page does. This page is a set of six complete examples, from the smallest valid page to a page not found, each one ready to copy into a file and open in your browser.

If the skeleton itself is new to you, our guide to HTML document structure explains each line of it, and how landmarks like header and main work. Here we put those pieces together in different ways.

Every example below was opened in a real browser to check the structure it builds, and the outline under each one shows the headings the browser found, indented by level.

1. The smallest proper page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello</title>
</head>
<body>
  <main>
    <h1>Hello</h1>
    <p>This is the smallest page worth publishing.</p>
  </main>
</body>
</html>

h1 Hello

Use this as the starting point for every page you make. Each line in the head has a reason to be there: the charset makes accented letters and symbols display properly, the viewport stops phones from shrinking the page to an unreadable size, and the title names the browser tab and search result.

2. A blog post

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Our first allotment year | Green Patch</title>
  <meta name="description" content="What grew, what did not, and what we will plant next spring.">
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header>
    <a href="/">Green Patch</a>
    <nav>
      <a href="/blog">Blog</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Our first allotment year</h1>
      <p>Posted on <time datetime="2026-11-13">13 November 2026</time></p>
      <p>We took on plot 14 in March with no idea what we were doing.</p>
      <h2>What grew</h2>
      <p>Courgettes, far too many of them.</p>
      <h2>What did not</h2>
      <p>Carrots, every single time.</p>
    </article>
  </main>
  <footer>
    <p>Green Patch, a plot-to-plate diary.</p>
  </footer>
</body>
</html>

h1 Our first allotment year
  h2 What grew
  h2 What did not

The page has three landmarks: header, main and footer. The post itself sits in an article, because it makes sense on its own and could be shared or shown elsewhere. The time element gives the date in a form computers can read, while people see it written out normally. The description meta tag is what search engines often show under the title.

3. A page with a sidebar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Planting garlic | Green Patch</title>
</head>
<body>
  <header>
    <a href="/">Green Patch</a>
  </header>
  <main>
    <article>
      <h1>Planting garlic</h1>
      <p>Garlic goes in before the ground gets cold.</p>
    </article>
    <aside>
      <h2>More from the plot</h2>
      <ul>
        <li><a href="/blog/first-year">Our first allotment year</a></li>
        <li><a href="/blog/compost">Starting a compost bin</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>Green Patch</p>
  </footer>
</body>
</html>

h1 Planting garlic
  h2 More from the plot

aside holds content related to the main text but not part of it, such as related links, a note about the author or a box of tips. Here it sits inside main because the links belong to this page. A sidebar that repeats on every page of a site can sit outside main instead. Where the aside appears on screen is up to CSS: the HTML only says what it is.

4. A recipe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pumpkin soup | Green Patch</title>
</head>
<body>
  <main>
    <article>
      <h1>Pumpkin soup</h1>
      <p>Serves 4. Takes about 40 minutes.</p>
      <section>
        <h2>Ingredients</h2>
        <ul>
          <li>1 small pumpkin</li>
          <li>1 onion</li>
          <li>750ml vegetable stock</li>
        </ul>
      </section>
      <section>
        <h2>Method</h2>
        <ol>
          <li>Peel and chop the pumpkin and onion.</li>
          <li>Soften the onion in a large pan.</li>
          <li>Add the pumpkin and stock, then simmer for 25 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </section>
    </article>
  </main>
</body>
</html>

h1 Pumpkin soup
  h2 Ingredients
  h2 Method

Each section has its own heading, which is what makes it a section rather than a box. The ingredients are a bulleted list, because their order does not matter, and the method is a numbered list, because it does. Screen readers announce how many items each list has, which helps people follow along while they cook.

5. A contact page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact us | Green Patch</title>
</head>
<body>
  <main>
    <h1>Contact us</h1>
    <p>We usually reply within two days.</p>
    <form action="/contact" method="post">
      <label for="name">Your name</label>
      <input id="name" name="name" type="text" required>
      <label for="email">Email address</label>
      <input id="email" name="email" type="email" required>
      <label for="message">Message</label>
      <textarea id="message" name="message" rows="5" required></textarea>
      <button type="submit">Send</button>
    </form>
  </main>
</body>
</html>

h1 Contact us

Every input has a label joined to it by matching for and id, so clicking the label puts the cursor in the box and screen readers read the label out. type="email" brings up an email keyboard on phones and checks the address looks right. required stops the form being sent while a box is empty.

6. A page not found

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>Page not found | Green Patch</title>
</head>
<body>
  <main>
    <h1>We could not find that page</h1>
    <p>It may have moved, or the address may have a typo.</p>
    <p><a href="/">Go to the home page</a></p>
  </main>
</body>
</html>

h1 We could not find that page

A good error page says plainly what happened and offers a way back. The robots tag asks search engines not to list it. The server should also send it with a 404 status code, which is what tells browsers and search engines that the page really is missing.

What every example has in common

Look back over the six and you will see the same pattern each time:

• The same head. Charset first, then viewport and a title that names both the page and the site.
• One main. It holds the content that is unique to this page.
• One h1. It says what the page is about, and every other heading sits under it in order.
• Elements chosen for meaning. Lists for lists, article for stand-alone content and time for dates, rather than a div for everything.

That last habit pays off three ways. Screen readers can jump straight to the main content or through the headings, search engines understand the page better, and your CSS has clear names to hang styles on.

Adapting an example for your own page

Pick the example closest to what you are making, then change it in this order:

1. The title and description. These are what people see in search results and browser tabs, so make them specific to the page.
2. The h1. It should say the same thing as the title, in words a visitor would use.
3. The headings below it. Sketch them first as a list, like a table of contents, before writing any paragraphs. If the list reads well on its own, the structure is right.
4. The content. Fill in each section, choosing the element that matches the meaning: a list for steps, a table for figures, a link for anything you can go to.

When you are done, paste the page into the W3C’s free Markup Validation Service to catch anything missing, such as an unclosed tag.

Common mistakes

Mixing up head and header

head holds information about the page and appears once, before the body. header is a visible part of the page, such as a logo and menu, and lives inside the body.

Skipping heading levels

Going from h1 straight to h4 because it looks the right size breaks the outline. Pick headings by level and set their size with CSS.

A div for everything

A page built only from divs works, but it tells browsers, screen readers and search engines nothing about what each part is.

Putting the footer inside main

The site footer belongs after main, as a sibling of it. Only content unique to the page goes inside main.

A short exercise

Build a page for a school summer fair. It needs a page header with the school’s name, a main area with an h1, two sections with h2 headings called What is on and Getting here, and a footer. Save it as a file, open it in your browser, and check the outline makes sense.

One possible answer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Summer fair | Hillside Primary</title>
</head>
<body>
  <header>
    <p>Hillside Primary School</p>
  </header>
  <main>
    <h1>Summer fair</h1>
    <p>Saturday 3 July, 11am to 3pm.</p>
    <section>
      <h2>What is on</h2>
      <ul>
        <li>Cake stall</li>
        <li>Tombola</li>
        <li>Sponge the teacher</li>
      </ul>
    </section>
    <section>
      <h2>Getting here</h2>
      <p>The school car park will be closed, so please walk if you can.</p>
    </section>
  </main>
  <footer>
    <p>Run by the Friends of Hillside Primary.</p>
  </footer>
</body>
</html>

h1 Summer fair
  h2 What is on
  h2 Getting here

The school’s name sits in a paragraph in the header rather than a heading, so the h1 can say what this page is about.

Related reading

• HTML document structure explained, the guide these examples build on.
• How websites work, for what happens between a server sending these files and a browser showing them.

Your next step

Copying a structure is a good start, and writing your own from memory is how it sticks. Gwecode’s HTML Level 1 builds these pieces one short lesson at a time, from the page skeleton and headings to landmarks, lists, tables and forms, with a live preview beside your code. Its level check has you build an about-me page of your own. Every lesson is free and runs in your browser. Create a free account to keep your progress, and start with the lesson below.

questions