HTML5 Basic Elements: Header, Nav, and Footer

By . in Web Design. Updated on .

HTML5 is still evolving, yet some of its new elements are ready to use today and are supported in both current and older browsers (with the help of a shim). These include tags like header, nav, and footer.

You might have encountered these elements in our HTML5 tutorials. Now, let’s get a closer look at what these tags offer and how they enhance web structure and accessibility.

This exploration is part of our series on exciting features in HTML5. If you’re catching up, here are some previous tutorials you might find useful:

The new HTML5 elements are aptly named to reflect their functions. The header element, as outlined in the HTML5 specification, represents “A group of introductory or navigational aids.” This official source helps ensure accuracy in our understanding of its purpose, avoiding potential distortions that can occur with second-hand interpretations.

From this definition, it’s clear that the header element is versatile, extending beyond merely marking the top of a web page. It can also introduce sections within the content, serving as a prelude to the material that follows.

Consider the example below, where the header element encompasses both the title and post metadata at the beginning of an article:

<header>
  <h1>This is the Title of the Content</h1>
  <div class="post-meta">
    <p>By Author <span class="category">Filed in Web 2.0</span></p> 
  </div>
</header>
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

This structure shows how the header effectively sets the stage for the content that follows, encapsulating elements that introduce and contextualize the subsequent text.

The nav element represents Navigation. As defined in the HTML5 specification, it is “A section of a page that links to other pages or to parts within the page: a section with navigation links.“

This element is typically associated with the primary navigation of a website, usually located at the top. However, its use is not restricted to this common placement.

As per the official specification, the nav element can be employed anywhere on the page that requires navigational links. Consider the example below:

<h4>Table of Contents</h4>
<nav>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#history">History</a></li>
    <li><a href="#development">Development</a></li>
  </ul>
</nav>

In this scenario, the nav element surrounds a Table of Contents for the page, with links that navigate to specific sections within the same document.

Exploring the Footer Element

The footer element is another widely adopted feature in HTML5. While we typically think of a footer as the section at the very bottom of a webpage, the HTML5 specification describes it differently; it states, “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Although this may sound complex, it’s quite straightforward. The footer is not just for the bottom of a webpage but can also conclude any section within a page. Here’s how it might look:

<div>
  <header>
    <h1>This is the Title of the Content</h1>
    <div class="post-meta">
      <p>By Author <span class="category">Filed in Web 2.0</span></p> 
    </div>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
    felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
    ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
    Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
  </article>
  <footer>
    <div class="tags">
      <span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
    </div>
    <div class="facebook-like">
      <div>10 likes</div> <!-- let's pretend it to be the Facebook like -->
    </div>
  </footer>
</div>

In the above example, the footer extends the post content with tags and ‘Likes’, demonstrating its flexibility beyond a simple page ender.

Final Thoughts

The header, nav, and footer elements might not perform flashy tasks like some newer HTML5 features, but they play crucial roles in structuring web content meaningfully for both browsers and users. This approach aligns with the vision of the Web’s inventor, Tim Berners-Lee.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail