Google Developer Expert 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.
Free eBook
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
-
Observables and Async Pipe - Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
Observables and Async Pipe 🕵️♂️ 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>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.
Free eBook
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
- Observables and Async Pipe
- Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
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!
