Header, Nav, and Main

The <header> element represents introductory content for its nearest ancestor sectioning element. At the page level it typically contains the site logo, site title, and primary navigation. A <header> can also appear inside <article> or <section> to head that specific section.

Nav and Main

The <nav> element marks a section of a page that links to other pages or parts within the page — use it for primary site navigation and table-of-contents links. Not every group of links needs <nav>; reserve it for major navigation blocks. The <main> element represents the dominant content of the document body. There should be only one <main> per page and it must not be nested inside <article>, <aside>, <footer>, <header>, or <nav>.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Header, Nav, Main</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #2c3e50; color: white; padding: 0 24px;
             display: flex; align-items: center; gap: 24px; }
    nav a { color: white; text-decoration: none; padding: 16px 8px;
            display: inline-block; }
    nav a:hover { background: rgba(255,255,255,0.1); }
    main { max-width: 960px; margin: 32px auto; padding: 0 24px; }
  </style>
</head>
<body>
  <header>
    <h1 style="font-size:1.2rem;">MySite</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
      <a href="/about/">About</a>
      <a href="/contact/">Contact</a>
    </nav>
  </header>

  <main>
    <h2>Welcome</h2>
    <p>This is the main content area.</p>
  </main>
</body>
</html>

HTML

Full Editor

Pro Tip

Add an aria-label attribute to each <nav> element when you have more than one on a page (e.g., aria-label="Primary" and aria-label="Footer") — this lets screen reader users distinguish between them.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned