Nav and main

Mark the main page areas with <nav> and <main>.

The nav tag

The <nav> tag marks the page's main menu. Links usually go inside as a list. That way screen readers say 'menu here' and the user can jump to it.

Example: <nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li></ul></nav>. Use <nav> only for the main menu, not to wrap every link on the page.

The main tag

The <main> tag marks the page's main content. A page has only one <main>, and inside it lives the page's real content, not its title, menu or footer.

Example: <main><h1>Post Title</h1><p>Post text...</p></main>. Screen-reader users say 'jump to main' and land here. Search engines also tell the real content apart this way.

Exercise Write the menu and the main content

Add a <nav> and a <main> to body. Inside the nav add a <ul> with one <li>; inside the <li> write <a href="/me">About</a>. Inside the main add an <h1> with the text About us.

Show example solution

<body>
  <nav>
    <ul>
      <li><a href="/me">About</a></li>
    </ul>
  </nav>
  <main>
    <h1>About us</h1>
  </main>
</body>

Test yourself

How many <main> tags appear on a page?
- Two
- Three
- One
- Unlimited
Show answer

One — Correct. main appears only once on a page.

Write the nav tag

<____>
  <ul>
    <li><a href="/home">Home</a></li>
  </ul>
</nav>

Show answer

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
  </ul>
</nav>

Match each tag to its role

<nav>

Main menu
<main>

Main content
<ul>

List container
<a>

Link

Next lesson: Article and section

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies