# HTML Includes System
This system allows for separating headers and footers into external HTML files that can be included in all individual pages, making maintenance easier and ensuring consistency across the site.
## Files
- `header.html`: Contains the common header elements for all pages
- `footer.html`: Contains the common footer elements for all pages
- `includes.js`: JavaScript file that handles the inclusion of header and footer files and applies the correct active states to navigation items
## How to Use
### 1. Include the JavaScript
Add the `includes.js` script to your HTML file:
```html
```
(Adjust the path as needed based on the location of your HTML file)
### 2. Add Include Placeholders
Add placeholder divs where you want the header and footer to be included:
```html
```
### 3. Example Structure
Here's a basic template for a page using includes:
```html
Your Title - Colin Knapp
Your Page Title
Your page content...
```
## Navigation Active States
The `includes.js` file automatically sets the active state for navigation items based on the current page. The navigation items in `header.html` have IDs that are used to identify which item should be active.
## Example Files
See the following example files that demonstrate how to use the includes system:
- `/template-with-includes.html`: Basic template
- `/stories/story-with-includes.html`: Example of a story page
- `/one-pager-tools/tool-with-includes.html`: Example of a tool page