HTML · The document layer
How should header, footer, nav and main be used?
Short answer
header introduces a page or section, nav contains major navigation links, main holds the unique content, and footer closes a page or section. Each page should have one main element.
These elements map to common page regions and create landmarks. Their placement is less important than their meaning: a header can appear inside an article, and a footer can close a section rather than the whole page.
- header usually contains a logo, page title and introductory content
- nav should contain major navigation, not every group of links
- main should contain the content unique to this page and appear once
- footer usually contains copyright, contact or related links
- Multiple nav elements need distinct accessible names
<header>
<a href="/">Vocal Hire</a>
</header>
<nav aria-label="Primary">
<a href="/practice">Practice</a>
<a href="/progress">Progress</a>
</nav>
<main>
<h1>Today's session</h1>
</main>
<footer>
<p>Built for interview practice.</p>
</footer>Do not put the site navigation inside main, and do not wrap the entire page in main. The point is to separate the repeated shell from the page-specific content so users can skip straight to it.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Can a page have more than one header?
- 2How many main elements should a document have?
- 3How do you distinguish multiple nav elements?
- 4What is a skip link?
Say it in the interview
header introduces a page or section, nav holds major navigation, main holds the page-specific content, and footer closes the page or section. I use one main per page and put the repeated shell outside it. If there are multiple navs, I give each a distinct aria-label. A skip link that jumps to main is a simple way to help keyboard users bypass the navigation.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.