Back to Unit 6

Unit 6 Website Development - Tutorial 1

1.11 Use semantic HTML such as header, nav, main, section and footer

Continue the same static website project by improving the page structure with semantic HTML.

What You Are Building

Semantic HTML uses tags that describe the meaning of the content, not just how it looks. This makes a web page easier to understand, easier to maintain and more useful for accessibility tools such as screen readers.

Instead of putting everything inside plain <div> elements, you can use elements such as <header>, <nav>, <main>, <section> and <footer>.

Semantic Page Template

This example shows a simple page divided into meaningful areas:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Coding Club</title>
</head>
<body>
    <header>
        <h1>School Coding Club</h1>
            <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="timetable.html">Timetable</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>About the club</h2>
            <p>We learn how to build websites and simple programs.</p>
        </section>

        <section>
            <h2>What we do</h2>
            <p>Students work on HTML, CSS and programming challenges.</p>
        </section>
    </main>

    <footer>
        <p>School Coding Club 2026</p>
    </footer>
</body>
</html>

What Each Element Does

Element Purpose
<header> Contains introductory page or site content, such as a logo, page title or navigation.
<nav> Contains the main navigation links for moving around the website.
<main> Contains the main unique content of the page. There should usually be only one <main> element on a page.
<section> Groups related content together, usually with its own heading.
<footer> Contains footer information such as copyright, contact details or useful links.

Build It Yourself

  1. Open index.html, about.html, timetable.html and contact.html.
  2. Add a <header> at the top of each page's <body>.
  3. Put the page's main <h1> inside the <header>.
  4. Add one <main> element after the <header> on each page.
  5. Move each page's main content into clear <section> elements inside <main>.
  6. Give each <section> its own <h2> heading and paragraph.
  7. Add a <footer> after <main> on each page.
  8. Save all four pages and check that they still open correctly in a browser.

Common Mistakes

Success Checklist