A footer is the closing area of a page or section. Think of it as the tidy sign-off: a handy home for a copyright notice, address, contact details, or links that help visitors after they finish the main content. section 11.10 section 11.11
Use the semantic footer element instead of an anonymous container when the content is genuinely closing or supplementary. Along with header, nav, main, article, section, and aside, it labels what each part of a page is for, helping assistive technologies interpret the page’s meaning. section 11.3 section 11.11
A footer in a semantic page
A simple page can end with a footer containing a copyright paragraph. The surrounding header, navigation, main content, article, sections, and aside make the footer’s job especially clear: it closes the page rather than carrying its central content. section 11.10
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<h1>Semantics Depot</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav>
<main>
<article>
<section>
<h3>Introduction</h3>
Introduction text
</section>
<section>
<h3>Argument</h3>
Argument text
</section>
<section>
<h3>Summary</h3>
Summary text
</section>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>
Sidebar paragraph
</p>
</aside>
</main>
<footer> #1
<p>Copyright Semantic Depot</p>
</footer> #1
Browse a complete semantic page skeleton to see the footer placed after the main content, with a copyright notice inside. section 11.10
Footers can do more than sit politely at the bottom. In a photo gallery, the footer holds a copyright notice and social-media links; Flexbox centers those items horizontally and vertically. If the page is short, letting main grow can fill the empty space above the footer. section 15.7
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start; #1
flex-grow: 1; #1
max-width: 960px;
font-family: Optima, Calibri, sans-serif;
}
footer {
display: flex; #2
justify-content: center; #2
align-items: center; #2
width: 100%; #3
padding: 1em 0;
text-transform: uppercase;
background-color: #543437;
}
footer p {
padding: 0 1.5em;
}
Inspect the CSS that turns the footer into a flex container and makes main fill spare vertical space before it. section 15.7
Common footer contents include:
- A copyright notice and contact information. section 11.10 section 5.2
- Links to social-media sites. section 15.7 section 20.2
- Site links such as Home, FAQ, Site Map, and Privacy. section 20.5
REMEMBER: semantic markup names the role of a page area; CSS decides its appearance. A footer may follow normal document flow in a bare-bones layout, or it may become a flex container with borders, spacing, alignment, and separate areas for copyright text and links. section 11.10 section 20.5
