Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we create a footer for a document or section in HTML5?
The HTML5 <footer> element represents a footer for a document or section. It typically contains authorship information, copyright notices, links to related documents, or other metadata. The footer provides semantic meaning to the content and helps screen readers and search engines understand the document structure.
Syntax
Following is the syntax for the HTML5 footer element −
<footer> Footer content here </footer>
The <footer> element can be used multiple times in a document. It can appear as a footer for the entire page or as a footer for individual sections like articles or aside elements.
Document Footer
A document footer appears at the bottom of the page and typically contains site-wide information such as copyright notices, contact information, or links to privacy policies.
Example
Following example demonstrates creating a basic document footer −
<!DOCTYPE html>
<html>
<head>
<title>HTML Footer Tag</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px;">
<header style="background-color: #f0f0f0; padding: 20px; text-align: center;">
<h1>Simply Easy Learning</h1>
<p>You're visiting tutorialspoint.com - tutorial hub for simply easy learning.</p>
</header>
<main style="padding: 20px; min-height: 300px;">
<p>This is the main content area of the page.</p>
</main>
<footer style="background-color: #333; color: white; text-align: center; padding: 15px; margin-top: 20px;">
© Copyright 2024, All Rights Reserved
</footer>
</body>
</html>
The output shows a complete page layout with a styled footer at the bottom −
Simply Easy Learning You're visiting tutorialspoint.com - tutorial hub for simply easy learning. This is the main content area of the page. © Copyright 2024, All Rights Reserved (white text on dark background)
Section Footer
The <footer> element can also be used within sections or articles to provide metadata specific to that content block.
Example
Following example shows footer elements used within article sections −
<!DOCTYPE html>
<html>
<head>
<title>Section Footer Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<article style="border: 1px solid #ddd; margin-bottom: 20px; padding: 15px;">
<h2>HTML5 Tutorial</h2>
<p>Learn HTML5 with our comprehensive tutorial covering all the latest features.</p>
<footer style="border-top: 1px solid #eee; padding-top: 10px; margin-top: 15px; font-size: 0.9em; color: #666;">
Published on: January 15, 2024 | Author: TutorialsPoint Team
</footer>
</article>
<article style="border: 1px solid #ddd; margin-bottom: 20px; padding: 15px;">
<h2>CSS3 Guide</h2>
<p>Master modern CSS with practical examples and best practices.</p>
<footer style="border-top: 1px solid #eee; padding-top: 10px; margin-top: 15px; font-size: 0.9em; color: #666;">
Published on: February 10, 2024 | Author: Web Development Team
</footer>
</article>
</body>
</html>
Each article has its own footer containing publication information −
HTML5 Tutorial Learn HTML5 with our comprehensive tutorial covering all the latest features. Published on: January 15, 2024 | Author: TutorialsPoint Team CSS3 Guide Master modern CSS with practical examples and best practices. Published on: February 10, 2024 | Author: Web Development Team
Footer with Navigation Links
Footers commonly include navigation links, contact information, and social media links to enhance user experience and site navigation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Footer with Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<main style="padding: 20px; min-height: 400px;">
<h1>Welcome to Our Website</h1>
<p>This is the main content of our website.</p>
</main>
<footer style="background-color: #2c3e50; color: white; padding: 30px 20px;">
<nav style="margin-bottom: 20px;">
<a href="/about" style="color: #ecf0f1; text-decoration: none; margin-right: 20px;">About</a>
<a href="/contact" style="color: #ecf0f1; text-decoration: none; margin-right: 20px;">Contact</a>
<a href="/privacy" style="color: #ecf0f1; text-decoration: none; margin-right: 20px;">Privacy Policy</a>
<a href="/terms" style="color: #ecf0f1; text-decoration: none;">Terms of Service</a>
</nav>
<p style="text-align: center; margin: 0;">© 2024 TutorialsPoint. All rights reserved.</p>
</footer>
</body>
</html>
The footer includes navigation links and copyright information −
Welcome to Our Website This is the main content of our website. About Contact Privacy Policy Terms of Service © 2024 TutorialsPoint. All rights reserved. (Dark background with white text and links)
Best Practices
When using the HTML5 <footer> element, consider these guidelines −
Content appropriateness − Include only footer-relevant content like copyright notices, authorship information, or related links.
Sectioning context − A footer relates to its nearest sectioning content (body, article, section, aside, nav).
Multiple footers − You can have multiple footer elements, but each should be contextually appropriate to its parent section.
Accessibility − Use semantic HTML and proper heading hierarchy within footer content for screen reader compatibility.
Conclusion
The HTML5 <footer> element provides semantic structure to web pages by clearly defining footer content. It can be used for both document-level footers with site-wide information and section-level footers with content-specific metadata. Proper use of the footer element improves accessibility and helps search engines understand your page structure.
361 Views
