Header structure

Structure the site <header> with nav and logo.

Header and site identity

The very top of a page is usually wrapped in <header>. This zone, called site branding, holds the logo, site name and main menu. It is the first thing a visitor meets.

Inside you often find an <h1> (logo or site name) and a <nav> (main menu). A page can hold more than one <header>; each <article> or <section> can carry its own top.

Laying out the menu inside nav

Inside a <header> you can place the logo and the menu side by side or stacked. The healthiest way is to wrap the menu in <nav> and lay the links as a list.

A typical magazine top looks like: <header><h1>Cheese Magazine</h1><nav><ul><li><a>...</a></li></ul></nav></header>. The screen reader then calls the menu a 'list' and tells the visitor how many links there are.

Exercise Build the magazine top

Add a <header> to body. Inside the header write an <h1> with the text Cheese Magazine. Add a <nav> inside the header; inside it put a <ul> with at least two <li>. Each <li> must hold an <a> with non-empty text.

Show example solution

<body>
  <header>
    <h1>Cheese Magazine</h1>
    <nav>
      <ul>
        <li><a href="/posts">Posts</a></li>
        <li><a href="/archive">Archive</a></li>
      </ul>
    </nav>
  </header>
</body>

Notes on using header

Watch two points. First, <header> is not only for the very top of the page; an <article> can hold its own top. Second, use <nav> for the menu, but do not wrap every link on the page in <nav>; it should hold only the main menu.

So <header> is an 'identity' container, <nav> a 'main menu' container. Nested, they make the top of the page both meaningful and accessible.

Test yourself

What do you most expect in a page's top <header>?
- Only a footnote line
- Logo and main menu
- A comment box
- Table data
Show answer

Logo and main menu — Correct. header holds the site identity and the main menu.

Complete the third menu link

<nav>
  <ul>
    <li><a href="/posts">Posts</a></li>
    <li><a href="/archive">Archive</a></li>
    <li><a href="/____">Contact</a></li>
  </ul>
</nav>

Show answer

<nav>
  <ul>
    <li><a href="/posts">Posts</a></li>
    <li><a href="/archive">Archive</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Match the header parts

header

Top section
nav

Main menu
h1

Logo / site name
ul

Link list

Next lesson: Main content

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies