Semantic HTML - Headers and Footers

In the previous Semantic HTML — Introduction chapter, we learned 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 going through a handful of examples to better understand where these elements could be used in HTML documents and also how not to use them.

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 by 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 a settings button on the right-hand side. The center portion consists of the post's content. The bottom portion consists of buttons to like, share, and comment on the post.

The top portion here 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, navigation links, newsletter forms, etc.

However, again akin to <header>, <footer> isn't limited to just representing the global footer of a webpage; we can as 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>

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 learned 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 any rule 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 <header> inside of a <footer>.

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

Contrary to what one might expect, <footer> does NOT have to be the very last element of its container.

For example, referring to the social media post example above, the footer — which contains the like, share, and comment buttons — might have the post's comments after it.

Something like this:

<article class="post">
   <header>...</header>

   <div>...</div>

   <footer>
      <!-- Like, share and comment buttons here -->
   </footer>

   <div>
      <!-- Post's comments here -->
   </div>
</article>

As you can see here, the <div> element holding all the comments of the post comes after the <footer> element. This is perfectly valid because <footer> isn't necessitated to come at the very end of its parent.

<header> and <footer> apply to the document if not within a sectioning element

As we shall find out in this unit, there are multiple sectioning elements in HTML which denote new sections of content. These include <article>, <section>, <aside>, and <main>.

What's unique about these elements is that they scope any <header> or <footer> element within them. In other words, <header> or <footer> only applies to the sectioning element, NOT to the entire document.

If, however, <header> or <footer> are not inside any sectioning element, then they apply to the entire document — they effectively become global.

This is really important to note because it doesn't make much sense to have multiple global headers and global footers on a webpage where we instead meant to have scoped headers and footers for their respective sections.

If we wish to denote a given section's header using <header> and footer using <footer>, we must first make sure that the section is denoted using a sectioning element so that the header and footer get scoped likewise.