Skip to main content

HTML5 Header Element (Live Playground)

Introduction​

The <header> element in HTML5 is a semantic element used to define the header or introductory content of a page or section. In this tutorial, you will learn how to use the <header> element to create a structured and accessible header for your web pages, including common use cases and best practices.

Using the <header> Element​

The <header> element can be used to group elements that represent the header or introductory content of a page, section, or article. A typical use case for the <header> element is to contain a site title, logo, and navigation menu.

Here's an example of using the <header> element to create a simple page header:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Header Example</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <!-- Rest of the page content -->
  </body>
</html>

In this example, the <header> element contains an <h1> element with the site title and a <nav> element with a navigation menu.

Live Playground, Try it Yourself

Using Multiple <header> Elements​

You can use multiple <header> elements in a single document, such as for individual sections or articles. When using multiple <header> elements, ensure that each one is properly nested within its corresponding parent element, like a <section> or <article>.

Here's an example of using multiple <header> elements within an article:

HTML
<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on: <time datetime="2023-04-27">April 27, 2023</time></p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et libero non lorem consequat dapibus...</p>
  <footer>
    <p>Author: John Doe</p>
  </footer>
</article>

In this example, the <header> element contains the article title and publication date.

Live Playground, Try it Yourself

Best Practices​

When using the <header> element, consider the following best practices:

  1. Do not use the <header> element as a container for content that is repeated across multiple pages, such as footers, sidebars, or advertisements. Instead, use the <footer>, <aside>, or another appropriate semantic element for such content.

  2. Avoid using the <header> element within a <footer> element. Headers should be used for introductory content, whereas footers are meant for end-of-content information.

  3. Use appropriate heading elements (<h1> to <h6>) within the <header> element to denote the level of importance of the header content.

Conclusion​

In this tutorial, you learned how to use the HTML5 <header> element to create a structured and accessible header for your web pages. By using the <header> element and following best practices, you can create more organized and accessible web content.

As you continue to develop your web development skills, you'll encounter more advanced techniques for working with semantic elements like the <header>. For example, you might learn how to use CSS to style your headers, or use JavaScript to create dynamic, interactive navigation menus.