Know and understand the purpose of headers and footers

What is a Header?

📄 A header is the top part of a web page or document that usually contains the title, logo, navigation links, or other important information that repeats on every page. Think of it as the front door of a house – it welcomes visitors and tells them where they are.

• Shows the page title or website name
• Often includes navigation menus
• Can contain logos or icons
• Remains consistent across pages for easy navigation

What is a Footer?

📌 A footer sits at the bottom of a page. It usually holds less critical but still useful information such as contact details, copyright notices, links to privacy policies, or page numbers. Think of it as the back door – it gives you the exit plan and extra details you might need after exploring.

1. Contains copyright and legal info
2. Often lists contact details or social media links
3. Can include page numbers or navigation aids
4. Stays the same on every page for consistency

Why Headers & Footers Matter

🏠 They help users orient themselves on a site. A clear header tells you where you are, while a helpful footer gives you the next steps or additional resources. Consistency in these areas improves user experience and makes navigation intuitive.

Creating Headers & Footers in HTML

Use the semantic tags <header> and <footer> to define these sections. Inside, you can add <h1> for titles, <nav> for menus, or <p> for small text.

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<footer>
  <p>© 2026 My Website. All rights reserved.</p>
</footer>
  

Example: Header & Footer Layout

Element	Typical Content
Header	Logo, Site Title, Navigation Menu
Footer	© Year, Contact Info, Social Links, Page Number

Exam Tip: When marking a page layout, examiners look for clear separation of header and footer. Include page numbers in the footer and ensure the header contains the main title or navigation. Use semantic tags (<header>, <footer>) to demonstrate understanding of HTML structure.