HTML <footer> Tag – Page Footer
📌 Introduction
The <footer> tag is used to define the bottom section of a webpage or a section.
It usually contains:
- Copyright information
- Contact details
- Social media links
- Additional navigation
It is a semantic HTML5 element, meaning it clearly describes its purpose.
🧱 Syntax
<footer>Content here</footer>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Footer Example</title>
</head>
<body>
<h1>Main Content</h1>
<p>This is the body of the page.</p>
<footer>
<p>© 2026 My Website. All rights reserved.</p>
</footer>
</body>
</html>
🖥️ Output Explanation
- The
<footer>appears at the bottom of the page - It contains secondary or closing information
- It separates main content from extra details
🎯 What Goes Inside <footer>?
Common elements:
- Copyright text
- Author information
- Links (privacy policy, terms)
- Contact info
- Social media icons
Example:
<footer>
<p>© 2026 Ahmed Codes</p>
<a href="#">Privacy Policy</a>
<a href="#">Contact</a>
</footer>
🧠 Important Concept
👉 Like <header>, <footer> can be used:
- For the entire page
- Or inside sections/articles
Example:
<article>
<h2>Blog Post</h2>
<p>Content here...</p>
<footer>
<p>Written by Ahmed</p>
</footer>
</article>
⚖️ <footer> vs <div>
| Tag | Type | Purpose |
|---|---|---|
<footer> |
Semantic | Defines footer area |
<div> |
Generic | No meaning |
✔ Use <footer> for real footer content
🎯 Why <footer> is Important
- Improves website structure
- Helps SEO
- Makes layout professional
- Improves accessibility
🚫 Common Mistakes
- Using
<footer>for main content ❌ - Putting everything in footer ❌
- Not separating page structure ❌
🎨 Styling Example
<footer style="background:#222; color:white; text-align:center; padding:10px;">
© 2026 My Website
</footer>
🧪 Mini Exercise
Create a page with:
A header
A main paragraph
A footer with:
- Copyright text
- A link
Style the footer with dark background