Learn-WebDevelopment.com home page Learn-WebDevelopment.com

<header>

The HTML <header> element represents a container for introductory content. It typically contains headings, logos, navigation menus/links, and other introductory content for a section or the entire document.

It is a semantic element that helps screen readers and search engines understand the pages structure.

💡 Tip: Use <header> to mark up introductory content at the beginning of a section or page, such as site navigation, logos, and main headings.

Syntax

<header>
  <!-- Header content -->
</header>

Common <header> use cases

  • Main page header containing navigation, search, and site branding.
  • The beginning of an <article> or <section> element to introduce the content.

📝 Note: A web documents can have multiple <header> elements. One for the page's main header (often the top banner) and additional ones for sections or articles within the page.

Basic usage

Here is a simple example of using a <header> element:

<header>
  <h1>Learn Web Development</h1>
  <nav>
    <ul>
      <li><a href="/course/javascript/introduction/lets-see-what-javascript-can-do">JavaScript Course</a></li>
      <li><a href="/course/markdown/introduction-to-markdown/introduction-to-markdown">Markdown Course</a></li>
    </ul>
  </nav>
</header>

Output:

Learn Web Development

Block-level element

The <header> element is a block-level element meaning it:

  • Begins on a new line.
  • Takes up the full available width of the page.
  • Can contain other block-level and inline elements.
  • Typically styled with CSS for layout, responsiveness, and appearance.

Multiple headers on a page

A web document can contain multiple <header> elements, including one for the main page header and others for page sections:

<!-- Main page header -->
<header>
  <h1>Learn Web Development</h1>
  <nav>
    <ul>
      <li><a href="/all_courses">All Courses</a></li>
    </ul>
  </nav>
</header>

<!-- Section/article header -->
<main>
  <article>
    <header>
      <h2>JavaScript Fundamentals</h2>
      <p>JavaScript Basics</p>
    </header>
    <p>JavaScript is a powerful programming language used to...</p>
  </article>
</main>

Common content in headers

A HTML <header> element commonly contain:

  • Main navigation links/menus.
  • Page titles.
  • Search bar.
  • Company/page/product logos and branding.
  • User account links or logged in user name.
  • Social media links.
  • Breadcrumb navigation.

Accessibility and best practices

  • Use <header> for semantic content not just for styling purposes.
  • Ensure navigation is accessible with proper ARIA labels where applicable.
  • Keep header content concise and relevant to the document.
  • Keep hadings descriptive to clearly identify the section or page.

Styling

The <header> element is commonly styled with CSS for layout, appearance, and responsive design:

header {
  background-color:rgb(12, 28, 44);
  padding: 1rem;
}

header h1 {
  margin: 0;
  color: #fff;
}

Conclusion

The <header> element is essential for creating semantic and structured hedadings for a page or a section. Use it to contain introductory content to help both users and search engines understand your site structure.

<div><img>