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!
Top comments (0)