1.13 Build a basic navigation menu

Unit 6 Website Development - Tutorial 1

1.13 Build a basic navigation menu

Continue the same static website project by adding a navigation menu across your pages.

What You Are Building

A navigation menu is a set of links that helps visitors move around a website. It normally appears near the top of each page, often inside the <header> or just below it.

A basic navigation menu can be built with a semantic <nav> element and several <a> links.

Basic Navigation Example

Add this menu inside the <body> section of your HTML page:

<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>

Each link uses the href attribute to tell the browser which file to open when the user clicks it.

Menu Inside A Page

A navigation menu is usually placed near the top of the page so users can find it quickly:

<!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>

</body>
</html>

What Each Part Does

Part	Purpose
`<nav>`	Marks a section of the page as navigation.
`<a>`	Creates a clickable link.
`href="index.html"`	Gives the file path or web address the link should open.
Link text	The visible text users click, such as Home, About, Timetable or Contact.
`<header>`	Groups introductory content such as the site title and navigation menu.

Build It Yourself

Open the same unit-6-website folder.
Check that index.html, about.html, timetable.html and contact.html exist.
Add a basic HTML page structure to any page that does not have one yet.
Add the same <nav> menu inside the <header> of each page.
Make the Home link open index.html.
Make the About link open about.html.
Make the Timetable link open timetable.html.
Make the Contact link open contact.html.
Open index.html in a browser and test every link.

Common Mistakes

Forgetting the href attribute, which means the link has nowhere to go.
Typing the file name incorrectly, such as About.html instead of about.html.
Linking to a file that has not been created yet.
Putting all the links in one page but forgetting to copy the menu to the other pages.
Using unclear link text such as Click here instead of Home, About, Timetable or Contact.

Success Checklist

The menu is inside a <nav> element.
Each menu item uses an <a> link.
Each link has a correct href value.
The link text clearly describes the page it opens.
The same navigation menu appears on each page.
All links work when tested in a browser.