A footer section is the closing area at the bottom of a page. It usually gathers supplemental details such as copyright information, contact details, or links. section 11.10 section 5.31
Think of the footer as the page’s polite goodbye:
- Place a copyright notice there. section 10.64
- Add contact information, social media links, or links to other site sections. section 15.7 section 20.42
- Use a thank-you message, slogan, favorite epigram, or other extra information when useful. section 5.31
In HTML5, use the semantic <footer> element to mark this closing page area. A typical page places it after the main content, following the header, navigation, and article regions. section 11.10
CSS controls the footer’s personality and position. Flexbox can place copyright text and links side by side; padding, borders, colors, alignment, and typography provide visual structure. section 20.45 section 10.67
Choose its position based on the page experience you want:
- Let the footer follow the main content when the page may scroll. section 15.33
- Keep it at the bottom of a short page by allowing the main element to fill leftover space. section 15.33
- Make it always visible with position: fixed and bottom: 0, then add matching bottom padding to main content. section 15.39
A small landing-page footer
Create one outer footer area, place several links inside a footer-links container, and finish with a copyright notice. Replace placeholder href="#" values with real URLs when the site is ready. section 10.68
<div class="footer"> #2
<div class="footer-links"> #2
<a href="#" class="footer-link">About</a> #2
<a href="#" class="footer-link">Contact</a> #2
<a href="#" class="footer-link">Site Map</a> #2
<a href="#" class="footer-link">Privacy</a> #2
</div> #2
<div class="copyright"> #2
Copyright 2018 Logophilia Books #2
</div> #2
</div> #2
Browse a compact footer containing About, Contact, Site Map, Privacy, and copyright links. section 10.68
