Header, Nav, Section
Overview
Along with `<article>`, `<aside>`, and `<footer>`, we have three more crucial semantic tags for structuring pages: `<header>`, `<nav>`, and `<section>`.
These tags replace the old way of building websites where everything was just a generic `<div>`. By using these tags, you create a page outline that search engines and accessibility tools can understand.
Syntax
The `<header>` is the introductory content for a page OR a specific section. It usually contains a logo, a title, or a search bar. Don't confuse it with the `<head>` tag! (The `<head>` is invisible metadata, the `<header>` is visible content).
<!-- Page Header -->
<header>
<img src="logo.png" alt="Company Logo" />
<h1>Welcome to TechCorp</h1>
</header>
<article>
<!-- Article Header -->
<header>
<h2>Understanding React</h2>
<p>By Kartik Rai</p>
</header>
<p>React is a JavaScript library...</p>
</article>The `<nav>` tag is used for major block of navigation links. You shouldn't put every single link on your page inside a `<nav>`, only the primary menus (like the top menu bar or a table of contents).
<nav aria-label="Main menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>The `<section>` tag is a thematic grouping of content. A good rule of thumb is that if a block of content needs its own heading (like an `<h2>`), it should probably be wrapped in a `<section>`. If you just want to group items for styling, use a `<div>`.
<!-- A thematic group of content -->
<section id="pricing">
<h2>Pricing Plans</h2>
<div class="pricing-cards">...</div>
</section>
<section id="testimonials">
<h2>What our customers say</h2>
<div class="reviews">...</div>
</section>Common Pitfalls
- Using `<section>` without a heading inside it is usually a bad sign. A section implies a distinct thematic topic, which almost always warrants an `<h2>` or `<h3>`.
Real-World Example
A complete page skeleton using all semantic tags:
<body>
<header>
<h1>My Store</h1>
<nav>
<a href="/shop">Shop</a>
</nav>
</header>
<main>
<section class="featured-products">
<h2>Featured Today</h2>
<article class="product">...</article>
</section>
</main>
<footer>
<p>Copyright 2025</p>
</footer>
</body>