The <footer> element represents a footer for its nearest ancestor sectioning content element (like an <article> element), or for the body element if there is no such ancestor.
A footer typically contains information about its section, like citations, links, navigation, and copyright data.
Examples
Syntax
1 |
<article>
|
2 |
<h1>A Brief History of Locomotives</h1> |
3 |
<p>In eiusmod duis nulla sit anim nisi aliqua duis amet.</p> |
4 |
|
5 |
<p>Culpa tempor nostrud culpa mollit cillum magna fugiat exercitation. Sint commodo eu quis veniam incididunt ad amet.</p>. |
6 |
|
7 |
<p>Occaecat eu labore dolor laborum dolor ut velit aliquip dolore incididunt laborum dolore. Cupidatat consectetur sunt ullamco tempor tempor ad consequat dolore incididunt laborum ex. Deserunt cillum dolor ut aliqua aliqua labore nulla.</p> |
8 |
|
9 |
<footer>
|
10 |
<a href="../">Back to all articles</a> |
11 |
</footer>
|
12 |
</article>
|
Result
Syntax
Here is another example using a <footer> element. This one has no immediate ancestor.
1 |
<!DOCTYPE HTML>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>Locomotives</title> |
5 |
</head>
|
6 |
<body>
|
7 |
<h1>Locomotives</h1> |
8 |
|
9 |
<article>
|
10 |
<h1>A Brief History of Locomotives</h1> |
11 |
<p>In eiusmod duis nulla sit anim nisi aliqua duis amet.</p> |
12 |
</article>
|
13 |
|
14 |
<article>
|
15 |
<h1>Meet the Pioneers of the Railroad Industry</h1> |
16 |
<p>In eiusmod duis nulla sit anim nisi aliqua duis amet.</p> |
17 |
</article>
|
18 |
|
19 |
<article>
|
20 |
<h1>A Brief History of Locomotives</h1> |
21 |
<p>In eiusmod duis nulla sit anim nisi aliqua duis amet.</p> |
22 |
</article>
|
23 |
|
24 |
<footer>
|
25 |
<nav>
|
26 |
<a href="/index.html">Home</a> |
27 |
<a href="/about.html">About</a> |
28 |
</nav>
|
29 |
<p>Copyright © 2023 Jane Doe</p> |
30 |
</footer>
|
31 |
</body>
|
Browser Support
The <footer> element is supported in all modern browsers. Read more on caniuse.com.
Attributes
The <footer> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
Content
A <footer> element supports flow content but only with no <header> or <footer> element descendants. The <footer> element is also not a sectioning content like a <section> or <aside> tag.
Learn More
