🎓 A1Learner
🔍

HTML Header and Nav

The header element holds the opening content of a page or a section. The nav element holds a set of main links.

A page header

The header element holds the site name and a short line. Both sit at the top of the page.

<header>
  <h1>City Bakery</h1>
  <p>Fresh bread every morning.</p>
</header>

Links inside nav

The nav element holds the main links. A list keeps the links in order.

<nav>
  <ul>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="visit.html">Visit us</a></li>
  </ul>
</nav>

A header holding a nav

A nav element can sit inside a header. The links then sit with the site name.

<header>
  <h1>City Bakery</h1>
  <nav>Menu Visit us</nav>
</header>

More than one header

A page can hold several header elements. Each one opens its own part of the page.

<header>
  <h1>City Bakery</h1>
</header>
<div>
  <header>
    <h2>Today at the bakery</h2>
  </header>
  <p>Sourdough is back on the menu.</p>
</div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>City Bakery</title>
</head>
<body>
<header>
  <h1>City Bakery</h1>
  <p>Fresh bread every morning.</p>
  <nav>
    <ul>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="visit.html">Visit us</a></li>
    </ul>
  </nav>
</header>
<h2>Today at the bakery</h2>
<p>Sourdough is back on the menu.</p>
</body>
</html>

Key points

  • header: the opening content of a page or a section
  • nav: a set of main links for a page or a site
  • Use a list inside nav to keep links in order
  • A header can hold headings, a short line of text, or a nav element

In this example, the header element holds the bakery name and a short line. The nav element inside the header holds two links in a list. The heading and paragraph after the header hold the main news of the page. The links sit with the site name at the top.

Note

The header element is not a heading element like h1.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the nav element hold?