A footer section is the closing area of a web page or page section. It usually sits at the bottom, often spans the page width, and grows taller when it contains more content. Typical footer content includes a copyright notice, social media links, an address, or contact information. section 4.2.2 section 12.2.1
Use the HTML <footer> element to mark up this content. Put everything belonging to the footer between the opening <footer> tag and closing </footer> tag. A paragraph is a simple way to hold a copyright notice. section 4.2.2 section 12.2.1
A simple copyright footer
<footer> <p>Copyright 2023 Code & Prose</p> </footer> A generated page can instead request a current year and a chosen site or organization name. section 4.2.2
When planning a footer, keep it focused:
- Add a copyright notice as the basic closing item. section 4.1
- Place social media links there when they are not already in the header; avoid repeating them in both places. section 4.2.2
- Use a distinct background color to visually separate the footer from the page content. section 4.2.2
- Keep shared footer content consistent across site pages, while reserving the main element for each page’s unique content. section 12.2.1
For an AI-generated page, explicitly name the footer and list its required contents in the prompt—for example, a copyright notice and social media links. Save the generated HTML in index.html and its CSS in the linked stylesheet file, then inspect the footer in the browser and adjust the wording or styling as needed. section 4.2.6 section 4.5
Figure 4.3 A page footer
View a rendered page footer to see how the closing area appears after CSS is applied. section 4.2.2
