<header>

In the design of a website, the header is often the first thing your visitors see. The <header> tag allows you to structure this essential section effectively. It generally contains titles, logos, as well as navigation menus.

Structure and syntax of the <header> tag

Basic structure and syntax

The <header> tag is a container tag that will be used to enclose the elements of the header of our website. It will therefore have:

• An opening tag <header>;
• As well as a closing tag </header>.

Its structure is very simple:

<header>
    <!-- Elements that should appear in the header -->
</header>

Usage example

Let's take a more illustrative example:

<header>
  <h1>Main Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

Easy, right? 😉

Attributes

The <header> tag does not have specific attributes to itself, but it can use all global HTML attributes, such as id, class, or even style.

Best practices

For optimal use of the <header> tag, follow the following recommendations:

Use <header> to introduce the main content of your site or a section. This helps search engines and screen readers understand the hierarchy and structure of your page.

Also, avoid using multiple <header> tags within the same section, unless you have a very specific structure with clearly defined sections (such as articles with their own headers).

Avoid including other tags like <nav> for navigation menus within the <header> tag itself: this is not a problem!

Difference with other similar tags

• <main>: The <main> tag represents the main content of a page, while <header> is intended to introduce this content.
• <section>: The <section> tag groups thematic content. If it contains a header, you can use a <header> tag within it.
• <footer>: Unlike <header>, <footer> is used for footer information.

Browser compatibility

The <header> tag is compatible with all modern browsers.