Semantic HTML - Headers and Footers

In the previous Semantic HTML — Introduction chapter, we learnt what exactly semantic HTML is and why it's beneficial over non-semantic HTML. If you haven't read the chapter, it's recommended that you go through it at least once before proceeding with this one.

In this chapter, we'll start off with covering the semantic HTML elements used to denote headers and footers. These elements are <header> and <footer>, respectively.

We'll be showcasing a handful of examples of where these elements could be used in HTML documents and also how not to use them. There's a lot to cover in this chapter, all really important information.

The <header> and <footer> elements are quite mainstream these days and so it's ideal to be equipped with the knowledge of when and how to leverage them.

Let's get started.

Amongst the header and footer, which one comes first? Clearly the header, right?

So, let's commence our discussion with exploring the semantic element to represent headers — <header>.

Quoting from the official HTML standard:

The header element represents a group of introductory or navigational aids.

Typically, <header> is used to define the main header of a webpage which sits at the top of the page with additional navigational links inside it and even the brand's logo.

Here's an illustration:

Header of a webpage

An example is shown below for our own website (the header is marked with a blue-bordered rectangle):

Header marked for the landing page of Codeguage

It's paramount to note that <header> is not just meant for representing the main header of a webpage; it can even be used to represent the header of any other section on the webpage.

Perhaps, this is an obscure purpose of <header> that many people aren't aware of or just don't use in their websites.

For example, consider the top portion in a blog article where we have the article's heading along with some supplemental information, such as its duration, publish date, author's name, and so on and so forth. This whole section is an ideal candidate for <header>.

In the illustration below, we demonstrate this top portion for one of our own blog articles:

Header of a blog article.

Another possible usage of <header> could be in a social media post. Here's how.

A social media post can generally be divided into three discrete portions: the top, the center, and then the bottom. The top portion typically contains the profile picture and the name of the person who made the post, in addition to some settings button on the right-hand side. This top portion is a perfect candidate for <header>.

Here's an illustration (again the blue-bordered rectangle denotes the section that could be marked up using <header>):

Header of a social media post.

In all these examples, we've been talking about <header> only from a verbal and illustrative perspective; we haven't yet seen it in actual HTML code. Let's do that now.

Consider the following code:

<header>
   <h1>Introduction to HTML</h1>
   <p>Get to learn the basics of HTML</p>
</header>

<h2>Where to write HTML</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptas asperiores vero ipsa possimus blanditiis.</p>
<p>...</p>

We have a document representing a tutorial page for learning HTML. The <header> element encapsulates the top-level heading along with a sub-heading (denoted using a <p>) and, thus, denotes the header of the tutorial page.

Live Example

In this example, notice that the <header> appears at the very top of the document before any other content. However, this ain't required.

For example, we can have a navigation bar at the very top of the page, before the <header>:

<div class="nav">
   <a href="#Home">Home</a>
   <a href="#About">About</a>
</div>

<header>
   <h1>Introduction to HTML</h1>
   <p>Get to learn the basics of HTML</p>
</header>

<h2>Where to write HTML</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptas asperiores vero ipsa possimus blanditiis.</p>
<p>...</p>

Live Example

<header> is used to denote introductory content, which could appear anywhere in a document; consequently, there's absolutely no mandate on it to be visually the top-most part of the document.

The semantic complement of <header> is the <footer> element.

Quite trivial of a description, isn't it?

Just like <header>, the <footer> element's main usage is to denote the global footer of an HTML document.

Footer of a webpage.

When this is the case, <footer> generally contains copyright or other disclaimer information for the document.

But more often than not, it contains a ton lot more content than that, for e.g. brand logo, links, subscription forms, etc.

However, again akin to <header>, <footer> isn't limited to just representing the global footer of a webpage; we can well use <footer> to denote the footer of any section of content on the webpage.

For example, we can use <footer> to represent the bottom portion of a social media post, which usually contains buttons to like and comment on the post:

Footer of a social media post.

Now, as before, it's time to move over to consider some code examples.

In the following code, we have a document along with its global footer, containing licensing information; the rest of the code is the same as we saw above:

<header>
   <h1>Introduction to HTML</h1>
   <p>Get to learn the basics of HTML</p>
</header>

<h2>Where to write HTML</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptas asperiores vero ipsa possimus blanditiis.</p>
<p>...</p>

<footer>
   <p>This document is available under an <a href="license.txt" rel="license">MIT license</a>.</p>
</footer>

Live Example

Notice the value of the rel attribute of the <a> element inside the <footer>; we saw this back in the HTML Hyperlinks chapter.

To make the footer appear more of as footer, we can use some very basic CSS as follows:

...

<footer style="background-color: lightgrey;">
   <p>This document is available under an <a href="license.txt" rel="license">MIT license</a>.</p>
</footer>

For brevity, we've omitted the rest of the HTML and used just ... in place of it.

Live Example

<header> can't go inside inside <header>; same for <footer>

As specified by the current HTML standard's definition for <header>, the <header> element can NOT contain a <header> element inside it (either directly or later on).

The same also applies to the <footer> element.

So, for example, the following code would be considered bad HTML:

<header>
   <h1>Introduction to HTML</h1>
   <article>
      <header> <!-- <header> can't be inside <header>! -->
         <h2>Table of contents</h2>
         <ol>
            <li>History of HTML</li>
            ...
         </ol>
      </header>
      <p>These contents were last updated one day ago.</p>
   </article>
</header>

The reason is pretty evident: the outer <header> element contains an <article> which further contains a <header> inside of it, which right away constitutes invalid HTML.

<header> can't go inside <footer>, and vice versa.

As we learnt in the discussion above, <header> can't go inside a <header> element. Fair enough. But can a <footer> go inside <header>, and vice versa?

Well, the <header> element can NOT go inside the <footer> element.

This shouldn't be surprising for us to know since the <footer> element is merely a complement of <header>, and so anything that applies to <header> might as well apply to <footer>.

For the sake of a concrete example, consider the following code where we have a small header section inside of a global footer, containing quick navigation links to other pages, before a license disclaimer:

<footer>
   <header> <!-- <header> can't be inside <footer>! -->
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/about">About</a></li>
         <li><a href="/contact">Contact</a></li>
      </ul>
   </header>
   <p>This content is available under the <a href="/license" rel="license">MIT license</a>.</p>
</footer>

This HTML is considered invalid as we have a <footer> inside of a <header>.

<footer> doesn't have to be the last element