Build Navigation

Introduction

A website is easier to use when visitors can move from one page to another. In this lesson, you will build a simple navigation menu for a small multi-page website. You will use HTML links to connect pages such as Home, About, and Contact.

Navigation is usually placed near the top of a page so visitors can find it quickly. A navigation menu is often made with a list of links, but the most important part is that each link points to the correct file.

What You Will Learn

• How links work in HTML.
• How to use the href attribute.
• How to connect several HTML pages.
• How to create a simple navigation menu using a list.

Understanding Links

An HTML link uses the <a> element. The text between the opening and closing tags is what visitors click. The href attribute tells the browser where to go.

<a href="about.html">About</a>

In this example, the visible link text is About. When a visitor clicks it, the browser looks for a file named about.html in the same folder.

The filename in the href value must match the actual filename. For example, contact.html and Contact.html may be treated as different files on some systems. Use simple lowercase filenames with no spaces to reduce errors.

Worked Example

Imagine your project folder contains these three files:

index.html
about.html
contact.html

Your home page could contain this navigation menu:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

The nav element identifies this area as navigation. The ul element creates an unordered list, and each li element contains one menu item. Each anchor points to a different page.

To make the site easy to use, add the same navigation menu to all three pages. This gives visitors a consistent way to move around your website, no matter which page they are viewing.

Guided Activity: Create a Three-Page Site

Build a small website about a topic you enjoy, such as a hobby, favorite place, game, sport, or music artist. Create three files in the same project folder: index.html, about.html, and contact.html.

1. Create the home page. Add a heading and a short paragraph introducing your topic. Add the navigation menu from the worked example.
2. Create the About page. Add a heading explaining the topic in more detail. Copy the same navigation menu into this file.
3. Create the Contact page. Add a heading and a paragraph explaining how a visitor could contact the site owner. Add the same navigation menu.
4. Test every link. Open index.html in a browser. Click Home, About, and Contact. Then test the links from the other two pages.
5. Improve the link text. Make sure each link clearly describes its destination. Words such as Home, About, and Contact are usually easy to understand.

Use this page structure as a starting point for each file:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<h1>Your Page Title</h1>
<p>Your page content goes here.</p>

Common Mistake

A frequent problem is writing a link to a file that does not exist or has a different name. For example, this link will not work if your file is named about.html:

<a href="AboutPage.html">About</a>

Fix it by making the href value match the filename exactly:

<a href="about.html">About</a>

Another common mistake is forgetting the closing </a> tag. Without it, the browser may treat more text than expected as part of the link.

Independent Challenge

Add a fourth page called gallery.html to your website. Include a heading, a short description, and the same navigation menu. Add a Gallery link to the navigation on all four pages.

Before you finish, check that every page links to every other page. Then ask yourself: Can a visitor understand what each link does without guessing?

Good navigation helps visitors feel confident because they always know where they are and where they can go next.