The <header> and <footer> elements are semantic HTML5 elements that define introductory content and concluding content for a page or section. They provide meaningful structure to your documents and help both users and search engines understand your content organization.
The Header Element
The <header> element represents introductory content or a group of navigational aids. It typically contains:
- Site logo or branding
- Site title or tagline
- Main navigation menu
- Search form
- Author information (in articles)
- Table of contents
Basic Page Header
The most common use of <header> is for the main page header at the top of your site:
basic-header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Awesome Website</h1>
<p>Your source for awesome content</p>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Page content -->
</main>
</body>
</html>Header with Logo and Navigation
A typical website header with branding and navigation:
header-with-logo.html
<header>
<div class="logo">
<img src="logo.svg" alt="Company Name">
<h1>Company Name</h1>
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<form action="/search" method="get">
<input type="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>Multiple Headers on a Page
You can use multiple <header> elements on a page. Each <article> or <section> can have its own header:
multiple-headers.html
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Main page header -->
<header>
<h1>Tech Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/articles">Articles</a>
</nav>
</header>
<main>
<!-- Article with its own header -->
<article>
<header>
<h2>Understanding JavaScript Closures</h2>
<p>
By <a href="/author/john">John Doe</a> on
<time datetime="2024-01-15">January 15, 2024</time>
</p>
<p>Category: <a href="/category/javascript">JavaScript</a></p>
</header>
<p>Article content goes here...</p>
<footer>
<p>Tags: JavaScript, Programming, Web Development</p>
</footer>
</article>
<!-- Another article with its own header -->
<article>
<header>
<h2>CSS Grid Layout Guide</h2>
<p>
By <a href="/author/jane">Jane Smith</a> on
<time datetime="2024-01-16">January 16, 2024</time>
</p>
</header>
<p>Article content goes here...</p>
</article>
</main>
<!-- Page footer -->
<footer>
<p>© 2024 Tech Blog</p>
</footer>
</body>
</html>The Footer Element
The <footer> element represents concluding content for its nearest sectioning content or the page as a whole. It typically contains:
- Copyright information
- Contact information
- Links to related documents
- Social media links
- Privacy policy and terms links
- Site map links
- Author information
Basic Page Footer
A simple page footer with copyright and links:
basic-footer.html
<footer>
<p>© 2024 Company Name. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/contact">Contact Us</a>
</nav>
</footer>Comprehensive Page Footer
A more detailed footer with multiple sections:
comprehensive-footer.html
<footer>
<div class="footer-content">
<section>
<h3>About Us</h3>
<p>We provide excellent services to our customers worldwide.</p>
</section>
<section>
<h3>Quick Links</h3>
<nav>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</nav>
</section>
<section>
<h3>Contact</h3>
<address>
<p>123 Main Street</p>
<p>New York, NY 10001</p>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p>
</address>
</section>
<section>
<h3>Follow Us</h3>
<nav>
<a href="https://twitter.com/company" aria-label="Twitter">Twitter</a>
<a href="https://facebook.com/company" aria-label="Facebook">Facebook</a>
<a href="https://linkedin.com/company" aria-label="LinkedIn">LinkedIn</a>
</nav>
</section>
</div>
<div class="footer-bottom">
<p>© 2024 Company Name. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/sitemap">Sitemap</a>
</nav>
</div>
</footer>Article Footer
Footers can also be used within articles for metadata:
article-footer.html
<article>
<header>
<h2>How to Learn Web Development</h2>
<p>By Jane Smith</p>
</header>
<p>Learning web development requires dedication and practice...</p>
<footer>
<p>
Published on <time datetime="2024-01-15">January 15, 2024</time>
</p>
<p>
Category: <a href="/category/tutorials">Tutorials</a>
</p>
<p>
Tags:
<a href="/tag/web-development">Web Development</a>,
<a href="/tag/learning">Learning</a>,
<a href="/tag/beginners">Beginners</a>
</p>
<p>
Share this article:
<a href="#" aria-label="Share on Twitter">Twitter</a>
<a href="#" aria-label="Share on Facebook">Facebook</a>
</p>
</footer>
</article>Styling Headers and Footers
Here's a complete example with CSS styling:
styled-header-footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header Styles */
body > header {
background-color: #2c3e50;
color: white;
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body > header .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
body > header h1 {
font-size: 28px;
margin: 0;
}
body > header nav ul {
list-style: none;
display: flex;
gap: 20px;
}
body > header nav a {
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s;
}
body > header nav a:hover {
background-color: #34495e;
}
/* Main Content */
main {
flex: 1;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
width: 100%;
}
/* Footer Styles */
body > footer {
background-color: #34495e;
color: white;
padding: 40px 0 20px;
margin-top: auto;
}
body > footer .footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
body > footer h3 {
margin-bottom: 15px;
font-size: 18px;
color: #3498db;
}
body > footer a {
color: #ecf0f1;
text-decoration: none;
transition: color 0.3s;
}
body > footer a:hover {
color: #3498db;
}
body > footer ul {
list-style: none;
}
body > footer ul li {
margin-bottom: 8px;
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding: 20px 20px 0;
border-top: 1px solid #4a5f7f;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom nav {
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<div class="container">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<main>
<h2>Welcome to My Website</h2>
<p>This is the main content area of the page.</p>
</main>
<!-- Page Footer -->
<footer>
<div class="footer-content">
<section>
<h3>About</h3>
<p>We are dedicated to providing excellent services to our customers.</p>
</section>
<section>
<h3>Quick Links</h3>
<nav>
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</section>
<section>
<h3>Contact</h3>
<address>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p>
</address>
</section>
</div>
<div class="footer-bottom">
<p>© 2024 My Website. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/sitemap">Sitemap</a>
</nav>
</div>
</footer>
</body>
</html>Best Practices
Use One Main Page Header
While you can have multiple headers, typically have one main header for the page:
main-header-best-practice.html
<!-- Good: One main header at page level -->
<body>
<header>
<h1>Site Name</h1>
<nav><!-- navigation --></nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
</header>
</article>
</main>
</body>
<!-- Avoid: Multiple top-level headers without clear purpose -->
<body>
<header>Header 1</header>
<header>Header 2</header>
<header>Header 3</header>
</body>Header/Footer Not Always Required
Don't use header or footer just because—only use them when you have appropriate introductory or concluding content:
when-to-use.html
<!-- Good: Article has meaningful header content -->
<article>
<header>
<h2>Article Title</h2>
<p>By Author Name on January 15, 2024</p>
<p>Reading time: 5 minutes</p>
</header>
<p>Article content...</p>
</article>
<!-- Unnecessary: No real introductory content -->
<article>
<header>
<h2>Article Title</h2>
</header>
<p>Article content...</p>
</article>
<!-- Better: Just use h2 directly -->
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>Proper Nesting
Don't nest header or footer inside address or another header/footer:
proper-nesting.html
<!-- Wrong: Don't nest header in header -->
<header>
<header>
<h1>Title</h1>
</header>
</header>
<!-- Wrong: Don't put header in address -->
<address>
<header>Contact Info</header>
</address>
<!-- Correct: Proper structure -->
<header>
<h1>Title</h1>
<address>
Contact: <a href="mailto:info@example.com">info@example.com</a>
</address>
</header>Include Semantic Content
Headers and footers should contain meaningful content:
semantic-content.html
<!-- Good: Meaningful header content -->
<article>
<header>
<h2>Complete Guide to Web Development</h2>
<p>
By <a href="/author/john">John Doe</a>,
Published <time datetime="2024-01-15">January 15, 2024</time>
</p>
<p>Last updated: <time datetime="2024-01-20">January 20, 2024</time></p>
</header>
<p>Article content...</p>
</article>
<!-- Good: Meaningful footer content -->
<article>
<p>Article content...</p>
<footer>
<p>Tags: <a href="/tag/web">Web Development</a>, <a href="/tag/html">HTML</a></p>
<p>Share: <a href="#">Twitter</a> <a href="#">Facebook</a></p>
</footer>
</article>Accessibility Considerations
- Headers and footers are landmark regions for screen readers
- Use heading elements (
<h1>-<h6>) appropriately - Ensure navigation links are keyboard accessible
- Provide descriptive link text (not just "click here")
- Use
<nav>for navigation sections - Make sure contrast ratios meet WCAG standards
accessible-header-footer.html
<header>
<h1>Company Name</h1>
<!-- Labeled navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<footer>
<p>© 2024 Company Name</p>
<!-- Labeled footer navigation -->
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>Common Mistakes
Using div Instead of Semantic Elements
div-vs-semantic.html
<!-- Bad: Using divs with classes -->
<div class="header">
<h1>Site Name</h1>
</div>
<div class="footer">
<p>© 2024</p>
</div>
<!-- Good: Using semantic elements -->
<header>
<h1>Site Name</h1>
</header>
<footer>
<p>© 2024</p>
</footer>Wrapping Entire Page in Header/Footer
wrapping-mistake.html
<!-- Wrong: Header wrapping everything -->
<header>
<h1>Title</h1>
<main>
<p>All content...</p>
</main>
</header>
<!-- Correct: Proper structure -->
<header>
<h1>Title</h1>
</header>
<main>
<p>All content...</p>
</main>
<footer>
<p>Footer content</p>
</footer>Key Takeaways
<header>contains introductory content<footer>contains concluding content- Both can be used multiple times on a page
- Page-level headers typically contain logo, title, and navigation
- Page-level footers contain copyright, links, and contact info
- Articles and sections can have their own headers and footers
- Headers and footers are landmark regions for accessibility
- Don't nest header/footer inside header/footer
- Use semantic elements instead of
<div class="header"> - Include meaningful content, not just for structure
What's Next?
Now that you understand header and footer elements, the next lesson will cover the <nav> element, which is used to mark up navigation sections within your headers and other parts of your page.