Cambridge Syllabus Notes

Topic 13: Layout – Headers and Footers

What is a Header and Footer?

A header is the top section of a web page that usually contains the title, logo, or navigation links. Think of it as the “nameplate” on a school bus that tells everyone where it’s going. A footer is the bottom section that often holds contact info, copyright notices, or quick links. It’s like the “end of class” notice that reminds you of the next lesson.

Creating a Header

Open your HTML file and locate the <body> tag.
Insert a <header> element at the top:

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

Style it with CSS:

header {
  background:#3498db;
  color:white;
  padding:10px 0;
  text-align:center;
}
nav a {
  color:white;
  margin:0 15px;
  text-decoration:none;
}

Preview the page – you should see a blue banner with white text and links.

Editing a Footer

At the bottom of <body>, add a <footer> element:

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

Style it:

footer {
  background:#95a5a6;
  color:#ecf0f1;
  padding:8px 0;
  text-align:center;
  font-size:0.9em;
}

Check that it sticks to the bottom of the page, even if the content is short.

Common Mistakes to Avoid

Using <div> instead of semantic <header> or <footer> tags – this reduces accessibility.
Forgetting to close tags – a missing
Overloading the header with too many elements – keep it simple and readable.
Not testing on different screen sizes – use meta viewport and responsive CSS.

Exam Tips

📝 Remember: The exam may ask you to create a header or footer using <header> or <footer> tags and style them with CSS. Show the HTML structure clearly and include at least one navigation link in the header and a copyright notice in the footer.

💡 Show your work: Write the CSS rules in a separate <style> block or an external stylesheet. Highlight the key properties: background-color, color, padding, text-align.

⚠️ Check accessibility: Use semantic tags and ensure sufficient color contrast. Mention that <header> and <footer> help screen readers.

Section	Key Points
Header	Semantic tag, contains title/logo, navigation links.
Footer	Semantic tag, holds copyright, contact info.
Styling Tips	Use `background-color`, `color`, `padding`, `text-align`.
Exam Checklist	Semantic tags, CSS separation, accessibility, clear structure.

Be able to create or edit headers and footers