The top of almost every website has a header with a logo and some navigation links. HTML5 gave us dedicated tags for both of these, making it crystal clear what role each section plays.
The Header Tag
<header> represents introductory content. It usually contains a logo, the site title, and sometimes navigation. A page can have multiple headers — one at the top of the page, and separate ones inside articles or sections.
<header>
<h1>My Awesome Blog</h1>
<p>Thoughts on web development and design</p>
</header>
The Nav Tag
<nav> wraps a block of navigation links. It is meant for major navigation blocks — the primary menu, a table of contents, or pagination links. You do not need to wrap every single link in a <nav>, just the important navigation groups.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Header and Nav Together
You will often see <nav> nested inside <header>, but they can also be independent. Some sites put navigation above the header, or below it. The important thing is that both tags are used where they semantically belong.
<header>
<h1>Site Name</h1>
<nav>
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/support">Support</a>
</nav>
</header>