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