New in HTML5.

<footer> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Document Structure Before And After HTML5 – Here’s What Changed
What does <footer> HTML Tag do?
The <footer> element is a structural element used to identify the footer of a page, document, article, or section. A <footer> typically contains copyright and authorship information or navigational elements pertaining to the contents of the parent element.
Display
block
Usage
semantic

Using <footer>

The obvious place for the <footer> element is at the bottom of a web page. Most sites have a footer (with copyright, contact, and other info), and now, thanks to HTML5, you can create this with the semantic-meaningful <footer> element instead of a meaningless <div>.

<!DOCTYPE html> <html>  <head>   .   .   .  </head>  <body>   <header>    <h1><!-- Site or Page Title --></h1>    <nav><!-- main navigation --> </nav>   </header>   <main>    <article>     <!-- main article content -->    </article>   </main>   <aside>    <!-- sidebar -->   </aside>   <footer>    <section>     <!-- Copyright Info -->    </section>    <address>     <!-- Contact Info -->    </address>   </footer>   <script>// Javascript </script>  </body> </html> 

You can also use <footer> to define a footer for any section of content, not just the page as a whole. (The <header> element works this way as well.)

<article>  <header>   <h2>Title of Article</h2>   by Author's Name  </header>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies interdum egestas. Cras placerat lacinia vulputate. Curabitur mattis diam ac est volutpat laoreet.</p>  <footer>   <dl>    <dt>Published</dt>    <dd>13 November 2015</dd>    <dt>Tags</dt>    <dd>Sample Posts, Fake Latin, Semantic Markup</dd>   </dl>  </footer> </article> 

Title of Article

by Author’s Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies interdum egestas. Cras placerat lacinia vulputate. Curabitur mattis diam ac est volutpat laoreet.

Published

13 November 2015

Tags

Sample Posts, Fake Latin, Semantic Markup

The important thing to remember is that the <footer> is related to its parent element. If it inside an <article> element, then it is the footer of that article. If it is the last element inside the <body> element, then it is the footer of the page as a whole. For more information about this and related elements, see our tutorial on semantic document structure.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for footer

iefirefoxchromeedgesafariopera
11344513943