Integrating Common Headers and Footers

Overview

One of the key principles of professional web development is consistency. Instead of manually copying the same <header> and <footer> across every page, you should use a method to reuse and maintain common code easily.

For this course, we’ll use Paul Browne’s HTMLInclude  — a lightweight script that lets you include common HTML fragments like headers, footers, or nav bars into multiple pages.

Why This Matters

• Consistency → every page has the same header/footer
• Efficiency → update once, apply everywhere
• Professionalism → closer to how templating systems (like React, Next.js, or server-side includes) work in the real world

Setting Up HTMLInclude

1. Download or reference the script
   • Get the script from GitHub 
   • Place it in your project folder (e.g., scripts/include.min.js)