HTML <footer> Tag

The <footer> tag specifies a footer section for a page or another container. It‘s meant to have summary information or concluding content.

HTML Tag

Example

#

A page layout with <header>, <main>, and <footer> sections.

Page title
Header section.
Main section.
Footer section.
<!DOCTYPE html>
<html>
 
 <head>
  <title>Page title</title>
 </head>

 <body>
  <header style="padding:30px;background:aliceblue;">
    Header section.
  </header>

  <main style="padding:90px 30px;margin:30px 0;background:aliceblue;">
    Main section.
  </main>

  <footer style="padding:30px;background:aliceblue;">
    Footer section.
  </footer>

 </body>
</html>

Using <footer>

The <footer> tag specifies the footer to its nearest content or the entire page.

A <footer> element may contain any of the following:

  • Author information
  • Copyright information
  • Navigation links
  • Related documents
  • Contact information
  • And more

A page can have multiple <footer> elements located in different sections.

More Examples

A <footer> at the bottom of an <article>.

Header section of an article...

Paragraph 1..

Paragraph 2..

Paragraph 3..

Footer section of an article...
<article>
 
  <header style="padding:10px;background:aliceblue;">
    Header section of an article...
  </header>
   
  <p style="padding-left:30px;">Paragraph 1..</p>
  <p style="padding-left:30px;">Paragraph 2..</p>
  <p style="padding-left:30px;">Paragraph 3..</p>
  
  <footer style="padding:10px;background:aliceblue;">
    Footer section of an article...
  </footer>

</article>

Attributes for <footer>

The <footer> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the footer element with a unique identifier.
class    classnames Assigns one or more classnames to the footer element.
style    CSS-values Assigns CSS style values to the footer element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the footer element is hidden.

For additional global attributes see our global attributes list.


Layout Tags

The <footer> tag is part of a group of semantic tags that help with creating the layout of web pages. This group is referred to as the Layout tag group. Together, these tags allow you to create comprehensive page layouts.

An example layout and a list of layout tags below.

HTML Layout
Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page

Note: Layout tags define areas on a page that contain content. By default they have no visual appearance, but are often styled, for example with a border or background color.


Browser support tag

Here is when <footer> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides