Paragraph 1..
Paragraph 2..
Paragraph 3..
The <footer> tag specifies a footer section for a page or another element.
It usually presents summary information or concluding content.
A page layout with <header>, <main>, and <footer> sections.
<!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>
The <footer> tag specifies the footer to its nearest content or the entire page.
A <footer> element may contain any of the following:
A page can have multiple <footer> elements located in different sections.
A <footer> at the bottom of an <article>.
Paragraph 1..
Paragraph 2..
Paragraph 3..
<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>
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.
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, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
| 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.
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 |
