Header, Navigation, Main and Sections

Modern Semantic Layout

Let’s look at the primary semantic tags used to define the major layout regions of a webpage.

The Header Tag

The <header> element represents introductory content. It is typically found at the very top of a webpage and contains the website’s logo, the main title (<h1>), and often the main navigation menu.

<header>
  <h1>My Awesome Tech Blog</h1>
  <p>The best coding articles on the web.</p>
</header>

The Nav Tag

The <nav> element is used exclusively for major navigation blocks (like the links that take you to different pages of the website). It is often placed inside the <header>.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

The Main Tag

The <main> element represents the dominant, core content of the document. Every page should have exactly one <main> element. It should NOT contain things that are repeated across multiple pages (like sidebars, navigation links, or site logos).

<main>
  <h2>Welcome to the Home Page</h2>
  <p>This is the primary content the user came here to read.</p>
</main>

The Section Tag

The <section> element represents a standalone thematic grouping of content. You can think of it like a chapter in a book. A <section> should almost always start with a heading (like an <h2> or <h3>).

<section>
  <h2>Our Services</h2>
  <p>We offer web design and development.</p>
</section>

<section>
  <h2>Our Team</h2>
  <p>Meet our expert engineers.</p>
</section>

Try It Yourself

Try structuring a simple webpage using <header>, <nav>, <main>, and <section> tags.

Key Takeaways

• <header> contains introductory content, like logos and main titles.
• <nav> is used for major navigation links.
• <main> wraps the primary, unique content of the page (use only once per page).
• <section> groups related thematic content together, usually starting with a heading.