What does the footer element represent in HTML5

The footer element in HTML5 is used to represent a footer for its predecessor sectioning content or, if there is no such element, for the document itself. It is the semantic counterpart to the older practice of using a generic <div> with an id of “footer”.

Purpose and Content

A <footer> contains information about its section, such as who wrote it, links to related documents, copyright data, contact information, terms of service, privacy policies, and disclaimers.
It can also contain navigation links to other parts of the site, like FAQs and terms and conditions. However, if the <footer> only contains these types of links, wrapping them in an additional <nav> element is unnecessary; the <footer> alone is sufficient.
<footer>elements can appear at the end of a document, a <section>, an <article>, or an <aside> element.
You can have multiple <footer> elements on a single page. For instance, each <article> in a blog could have its own <footer> with author information or links to share the article.

Important Considerations

The <footer> element is not defined by its position on the page; it doesn’t have to appear at the bottom. However, it most likely will.
The <footer> element does not participate in the HTML5 outline algorithm and does not section content.
The specification notes that contact information for the author of an<article> should instead be wrapped by an <address> element.

A page-level <footer> with copyright information

This example shows a basic <footer> at the end of the <body> containing a copyright notice.

<!DOCTYPE html>
<html>
<head>
  <title>Simple Page</title>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <main>
    <p>This is the main content of the page.</p>
  </main>
  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

Welcome!

This is the main content of the page.

A page-level <footer> with navigation and copyright information

the <footer> contains a <nav> for secondary site navigation and a copyright statement. Notice that the <nav> is inside the <footer>.

<!DOCTYPE html>
<html>
<head>
  <title>Website Footer Example</title>
</head>
<body>
  <header>
    <h1>My Awesome Site</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Main Article</h2>
      <p>Some interesting content here.</p>
    </article>
  </main>
  <footer id="page_footer">
    <nav>
      <ul>
        <li><a href="terms.html">Terms of Service</a></li>
        <li><a href="privacy.html">Privacy Policy</a></li>
        <li><a href="faq.html">FAQ</a></li>
      </ul>
    </nav>
    <p>&copy; 2010 AwesomeCo.</p>
  </footer>
</body>
</html>

My Awesome Site

Main Article

Some interesting content here.

A <footer> within an <article> with author information

the <footer> provides information specifically about the blog post. According to the specification, for author contact information, you should use <address>.

<article>
  <header>
    <h1>My Blog Post Title</h1>
    <p>Published on October 26, 2023</p>
  </header>
  <p>This is the content of my blog post...</p>
  <footer>
    <p>Written by John Doe.</p>
  </footer>
</article>

My Blog Post Title

Published on October 26, 2023

This is the content of my blog post…

A <footer> within a <section>

<section>
  <header>
    <h2>Comments</h2>
  </header>
  <article>
    <p>Comment 1...</p>
  </article>
  <article>
    <p>Comment 2...</p>
  </article>
  <footer>
    <p>End of comments section.</p>
  </footer>
</section>

Comments

Comment 1…

Comment 2…

ARIA Role

For accessibility, specially for older user agents or those don’t fully support HTML5, you can add the role=”contentinfo” ARIA attribute to the main <footer> of your document if it contains information like copyright and privacy terms. This helps screen readers identify this information about the page content.

<footer role="contentinfo">
  <p>&copy; 2023 My Website - All rights reserved.</p>
</footer>

If a <footer> contains more than just content information, you might enclose the content information within another element (like a <p> or <div>) and apply the role=”contentinfo” to that inner element.

the <footer> element provides a semantic way to define footers for pages or sections, containing additional information and navigation. Using it correctly improves the structure and accessibility of your HTML documents.

HTML5 Topics

Semantic Elements

Page Content

Tutorials