HTML5 Best Practices: Header Element

#html #webdev #beginners #semantic

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:

<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 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.

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:

<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:

<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>:

<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:

<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:

// 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 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 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!