Illustration of three mountain peaks with flags and a climber on the middle one

Challenge · easy

How to Make a Navigation Menu in HTML: Challenge

Q: How do I make a navigation bar in HTML?

Put a list of links inside a <nav> element: <nav><ul><li><a href="index.html">Home</a></li>...</ul></nav> . The HTML provides the structure and makes the menu a landmark (the landmarks lesson has more). Turning the vertical list into a horizontal bar without bullets is a CSS job for later, and the HTML does not change. For the page you are on, add aria-current="page" to its link. Its other values are in the WAI-ARIA 1.2 definition of aria-current .

Q: Why put navigation links in a list?

So screen readers can count them. With a list , users hear something like "list, 4 items" and can decide to skip the menu. Each link also gets its own item, which is easier to style. Links divided by characters like | are worse: a screen reader may read every one aloud as "vertical bar".

About 10 mineasy

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Goal: Turn a row of links into an accessible site menu.

Learn

Nearly every site has a main menu, and nearly every good one is built the same way: a <nav> with a <ul> inside and one link in each <li>. Screen reader users can jump straight to the nav landmark, and the list tells them how many links to expect. The nav section of the HTML standard (opens in a new tab) keeps nav for the major navigation blocks.

Pages on your own site get relative paths such as about.html. An email link is mailto: plus the address, a scheme that RFC 6068 (opens in a new tab) defines.

Put aria-current="page" on the link to the page you are on. A screen reader announces it as the current page. CSS can style it too.

The short version

A site menu follows the nav > ul > li > a pattern.
Pages on the same site are linked with relative paths like about.html.
A mailto: link opens a new email.
Exactly one link carries aria-current="page".

Example

<nav>
  <ul>
    <li><a href="shop.html" aria-current="page">Shop</a></li>
    <li><a href="faq.html">FAQ</a></li>
  </ul>
</nav>

Your task

Swap the starter for a real menu:

Leave the <nav> in place and add a <ul> inside it with 4 <li> items.
Put one link in each item: Home (index.html), About (about.html), Blog (blog.html) and Contact.
Contact uses mailto: to open an email to [email protected].
Give the Home link, and no other, aria-current="page" to mark it as the current page.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Frequently asked questions

How do I make a navigation bar in HTML?

Put a list of links inside a <nav> element: <nav><ul><li><a href="index.html">Home</a></li>...</ul></nav>. The HTML provides the structure and makes the menu a landmark (the landmarks lesson has more). Turning the vertical list into a horizontal bar without bullets is a CSS job for later, and the HTML does not change. For the page you are on, add aria-current="page" to its link. Its other values are in the WAI-ARIA 1.2 definition of aria-current (opens in a new tab).

Why put navigation links in a list?

So screen readers can count them. With a list, users hear something like "list, 4 items" and can decide to skip the menu. Each link also gets its own item, which is easier to style. Links divided by characters like | are worse: a screen reader may read every one aloud as "vertical bar".

Tags in this lesson