HTML5 Best Practices: Header Element
Tags: html, webdev, beginners, semantic
Published: 2020-05-18 07:07:33

Let's take a dive into one of the most commonly used and misunderstood elements introduced in HTML5 - the `<header>` element. Although it appears a new simple element to use, there's much more behind the scenes that we need to uncover, before we start using 
the `<header>` element.

### Before the header element 

Here's what we used to do to create a header which might contain things such as logos and titles:

```html
<div class="header" role="banner">
  <h1>Ultimate Courses</h1>
</div>
```

HTML5 has introduced a new way to define a header, that doesn't involve a generic looking `<div>` that isn't semantic or accessible by default - you can see to make things accessible we would have to use a `role="banner"` attribute to provide further description.

> 🕵️‍♂️ Checkout the HTML5 [Header element spec](https://html.spec.whatwg.org/multipage/sections.html#the-header-element) from WHATWG - who are a community that maintain and evolve the HTML specification!

With the rise of accessible technologies and the need for correctly implementing standards - we turn to the `header` element as our saviour, where we also find out that we no longer need to use the `role="banner"` attribute (which we'll come on to shortly).

### What is the Header Element?

The `<header>` element is a new semantic element that we can use to create better meaning behind our code. 

By using `<header>` you no longer need to use the `role="banner"` as it's inferred under the hood.

> 🕵️‍♂️ Find out more about the [ARIA banner role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role).

Header was created to group together the introduction of a website or introduce specific content, for instance a company name or an article title.

Lets make the move from a `div` to a `header` element:

```html
<header>
  <h1>Ultimate Courses</h1>
</header>
```

Easy enough right? We've now transformed our div into a brand new header!

Let's investigate further and uncover some best practices.

### Using the Header Element

Every element created in HTML comes with a set of placement rules, which means that for validation and accessibility reasons the `<header>` element can't be used anywhere we want - we must be careful not to create invalid code by using it incorrectly.

For instance, we cannot put a `<header>` element inside an `<address>`, `<footer>` or another `<header>` element.

Here's how a typical real-world example of a header would look like:

```html
<div class="hero">
  <header class="hero-header">
    <p class="hero-logo">Ultimate Courses</p>
    <nav class="hero-nav">
      <a href="/">Home</a>
    </nav>
  </header>
  <div>
    <article class="article">...</article>
  </div>
</div>
```

This is a perfectly valid example and it reflects the purpose of the `<header>` element. As you can see there's not really a huge change from using a `<div>` as we can still use our `<p>`, `<nav>` and `<a>` elements inside.

#### Other use-cases for header

In the above example we looked at a standalone `<header>` element, you can also see an `<article>` element which is another great use case for introducing a `<header>`:

```html
<article class="article">
  <header class="article-header">
    <h1>My blog title</h1>
    <p>Niels den Dekker, <time>May 15, 2020</time></p>
  </header>
  <div>
    <p>Your article text...</p>
    <h2>The next title</h2>
  </div>
</article>
```

This is why developers struggle with the `<header>` element, as it can be used in multiple places in your website - and not just to wrap a logo as it's commonly assumed.

### Header element and accessibility

Let's talk accessibility - which is often an afterthought. Here is how the `<header>` element is interpreted:

* The `<header>` element specified at the top of your HTML - the one closest to our `<body>` element - is always interpreted as the introduction of the webpage.
* If the `<header>` element is being used as a child of either a `<aside>`, `<article>`, `<main>`, `<nav>`, or `<section>` it becomes a more semantic content wrapper.

Here's how we might use both examples together in a real-world use case:

```html
<body>
  <div class="hero">
    <header class="hero-header"> <!-- closest to body - page header -->
      <p class="hero-logo">Ultimate Courses</p>
      <nav class="hero-nav">
        <a href="/">Home</a>
      </nav>
    </header>
  </div>
  <div>
    <article class="article">
      <header class="article-header">
        <h1>My blog title</h1>
        <p>Niels den Dekker, <time>May 15, 2020</time></p>
      </header>
      <div>
        <p>Your article text...</p>
        <h2>The next title</h2>
      </div>
    </article>
  </div>
</body>
```

The first header represents the introduction to the webpage, whereas the second one simply represents the introduction to the article.

### Legacy browser support

Because `<header>` was introduced in HTML5, there are older browsers that exist that have no idea what `<header>` means.

For supporting browsers every `<header>` element is `display: block`, which means older browsers won't have `display: block` built-in - which leads to very concerning style bugs.

We’d need to help older browsers out by adding our own `display: block` to our stylesheet:

```scss
// style.css
header { 
  display: block;
}
```

Now we can use our new HTML5 Header element in all browsers without causing any layout bugs.

This is more of a hack due to the way unrecognized elements can still be styled with CSS.

> 🕵️‍♂️ Find out more about the [browser compatibility](https://caniuse.com/#search=%3Cheader%3E) with the header element!

### Summary

Now you're primed with essential knowledge on the `<header>` element and when to use it correctly.

We've also learned about semantic elements and the importance of accessibility, through our journey from `<div>` to `<header>`.

> If you are serious about your HTML and CSS skills, your next step is to take a look at our [HTML + CSS Basics course](/learn/html-css-basics) that will teach you the full language basics in detail as well as many use cases you'll need in daily front-end development!

Thanks for reading and happy semantic coding!