Header, Nav, Main, and Footer Elements
When you first see a web page, you probably notice the top banner, the menu, the main content, and the bottom area with extra links. In HTML, we can build all of that using four special elements: header, nav, main, and footer.
In this beginner-friendly guide, you’ll learn what each of these elements does and how to use them to build a simple web page layout. By the end, you’ll have a clean, well-structured page you can customize and build on.
Why these elements matter
Early websites often used lots of plain <div> elements with class names like top, menu, or bottom. That works, but it doesn’t describe what each part of the page means.
Modern HTML gives us semantic elements. “Semantic” just means the name tells you (and the browser, and search engines, and screen readers) what the element is for.
These four are some of the most important:
<header>– The top section; usually has a logo, site title, or main heading<nav>– A navigation area; usually a menu of links<main>– The main content of the page (what the page is mostly about)<footer>– The bottom section; often has copyright text, contact info, or extra links
Using them makes your code easier to read, better for accessibility, and more future-proof.
Step 1: Start with a basic HTML page
Let’s begin with the smallest possible HTML file and then add header, nav, main, and footer.
Create a new file on your computer called layout.html, then paste this code into it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Layout</title>
</head>
<body>
<!-- We will add header, nav, main, and footer here -->
</body>
</html>
Save the file, then open it in your web browser (for example, by double-clicking it). You’ll see a blank page for now, which is perfect — we’re ready to add structure.
Step 2: Add a header
The header is usually the first thing people see. It might contain the site name, a logo, or a short description.
Add this inside the <body> element:
<body>
<header>
<h1>My Awesome Website</h1>
<p>Learning HTML step by step.</p>
</header>
</body>
What’s happening here?
<header>wraps the top section of the page.<h1>is a main heading. There should usually be one main heading per page.<p>is a paragraph with a short description.
If you refresh the browser, you’ll see a big title and a small line of text. No styling yet, but you’ve already created a real page header.
Try it yourself:
Change the text inside <h1> and <p> to match your name or a topic you like, then reload the page and see your changes.
Step 3: Add a navigation menu with nav
Most sites have a menu so visitors can move between pages. We place these menus inside a <nav> element.
Add this just below your header:
<body>
<header>
<h1>My Awesome Website</h1>
<p>Learning HTML step by step.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
What’s happening here?
<nav>tells the browser: this area is for navigation.<ul>means “unordered list” (a bullet list).<li>means “list item” – each item in the list.<a href="#home">is a link.hreftells the browser where the link goes.
Right now, the links go to #home, #about, and #contact. The # means “jump to a section on this page” with that ID. We’ll add those sections next.
Try it yourself:
Add another menu item, like Blog or Projects. Just copy one <li> line and change the text and href value.
Step 4: Add the main content with main
The main element holds the central content of the page — the part that’s unique to this page and not shared with a header or footer.
Place this code under the <nav> element:
<main>
<section id="home">
<h2>Welcome Home</h2>
<p>This is the main area of the page where your most important content goes.</p>
</section>
<section id="about">
<h2>About This Site</h2>
<p>I'm using HTML to learn how to build simple and clear web page layouts.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can pretend to contact me at example@email.com.</p>
</section>
</main>
Now your full <body> looks like this (we’ll add a footer in the next step):
<body>
<header>
<h1>My Awesome Website</h1>
<p>Learning HTML step by step.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Welcome Home</h2>
<p>This is the main area of the page where your most important content goes.</p>
</section>
<section id="about">
<h2>About This Site</h2>
<p>I'm using HTML to learn how to build simple and clear web page layouts.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can pretend to contact me at example@email.com.</p>
</section>
</main>
</body>
What’s happening here?
<main>wraps all the main content of this page.- Each
<section>holds a related group of content. - The
idon each section (id="home", etc.) matches thehrefvalues in your menu links.
If you refresh the browser and click the menu links, the page will jump to each section. That’s your navigation working!
Try it yourself:
Add a new section, for example Projects. Give it an id="projects", add a heading and a short paragraph, and don’t forget to add a matching link in the <nav> list.
Step 5: Finish with a footer
The footer is the bottom area of your page. It often contains copyright text, extra links, or a short note.
Add this right after the </main> closing tag:
<footer>
<p>© 2025 My Awesome Website</p>
<p>Built with love and basic HTML.</p>
</footer>
Now your full page (inside <body>) should look like this:
<body>
<header>
<h1>My Awesome Website</h1>
<p>Learning HTML step by step.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Welcome Home</h2>
<p>This is the main area of the page where your most important content goes.</p>
</section>
<section id="about">
<h2>About This Site</h2>
<p>I'm using HTML to learn how to build simple and clear web page layouts.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can pretend to contact me at example@email.com.</p>
</section>
</main>
<footer>
<p>© 2025 My Awesome Website</p>
<p>Built with love and basic HTML.</p>
</footer>
</body>
Refresh your browser. Scroll down and you’ll see the footer at the bottom.
Try it yourself:
Change the year, your site name, or add a link in the footer, such as:
<p>Follow me on <a href="https://example.com">my profile</a>.</p>
Step 6: Add a bit of basic styling (optional but fun)
Your page works already, but it probably looks plain. Let’s add a little CSS to make the structure easier to see. Don’t worry if CSS is new to you.
Inside the <head> element, add a <style> block like this:
<head>
<meta charset="UTF-8" />
<title>My First Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav {
background-color: #555;
padding: 0.5rem;
}
nav ul {
list-style: none; /* remove bullets */
margin: 0;
padding: 0;
display: flex; /* lay items in a row */
gap: 1rem; /* space between items */
justify-content: center;
}
nav a {
color: white;
text-decoration: none; /* remove underline */
}
main {
padding: 1rem;
max-width: 800px;
margin: 0 auto; /* center main content */
}
</style>
</head>
Refresh your page again. Now you should see a darker header and footer, a horizontal navigation menu, and nicely centered content.
Even if you don’t fully understand CSS yet, you’ve just combined HTML structure with a bit of design — that’s a big step.
Quick recap and what’s next
You’ve just built a complete page layout using:
<header>for the top section and main title<nav>for your navigation links<main>for the central, unique content of the page<footer>for information at the bottom
You’ve also:
- Learned how to link navigation items to sections using
idandhref="#id" - Created multiple sections inside
main - Added simple CSS to make your layout easier to see and use
Learning to code can feel like a lot at first, so celebrate this: you’ve gone from a blank page to a real, structured website layout. That’s a meaningful win.
What’s next?
- Add more sections to
mainand update your navigation. - Try different colors and fonts in the
<style>block. - Create a second HTML page and link to it from your
nav.
Each small experiment will grow your confidence. Keep your layout.html file — it can be the starting point for many future projects.
