<header>

The <header> element represents introductory content for its nearest sectioning ancestor — typically containing a logo, site title, and primary navigation.

Important: Assistive technologies implicitly add the role="banner", so it's best not to combine it with other roles like role="region" or role="group".

Basic Usage

<header>
  <nav>
    <h2>logo</h2>
  
    <h3>tagline</h3>
  
    <ul>
      <li><a href="#!">Log out</a></li>
    </ul>
  </nav>
</header>

With Search, Dropdown, and Links

<header>
  <nav>
    <input type="search" name="search" placeholder="Search" aria-label="Search" />
  
    <ul>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li>
        <details>
          <summary aria-haspopup="menu">About</summary>
          <ul dir="rtl" role="menu">
            <li><a role="menuitem" href="#services">Services</a></li>
            <li><a role="menuitem" href="#company">Company</a></li>
            <li><a role="menuitem" href="#careers">Careers</a></li>
          </ul>
        </details>
      </li>
      <li><a href="#" role="button" class="contrast">Log In</a></li>
    </ul>
  </nav>
</header>