How To Create Header In Html5

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.

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.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

✅ Success! Check your email, enjoy.

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

🕵️‍♂️ 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).

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.

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.

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>Todd Motto,              <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>Todd Motto,              <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.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

✅ Success! Check your email, enjoy.

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

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!