HTML `<header>` Element: Structuring Introductory Content and Navigation

Learn how to use the HTML `<header>` element to semantically group introductory content and navigation links on your web pages. This tutorial explains its purpose, usage guidelines, and how it contributes to creating well-structured and accessible websites.

Understanding the HTML <header> Element

What is the <header> Element?

The HTML <header> element represents a container for introductory content or a set of navigational links. It's typically placed at the beginning of a document or section to provide context and guidance to the user. A header might include headings, logos, authorship information, or a navigation menu. You can have multiple <header> elements on a single page, but they cannot be nested within each other or within <footer>, <nav>, or <article> elements.

Example:

<header>
  <h1>A heading here</h1>
  <p>Posted by John Doe</p>
</header>

Browser Support

The <header> element is well-supported across modern browsers. Here's a table showing the first version of each browser to fully support it:

Attributes

The <header> element supports standard global and event attributes.

Default CSS Styling

Most browsers render the <header> element as a block-level element by default.

header {
  display: block;
}