Header & Footer

The header and footer are foundational layout components shared across all pages. They are dynamically injected, maintain semantic structure, and support responsive interactions.

Injection and Reuse

The header and footer are not written into each HTML file. Instead, they are injected at runtime using a script that fetches and renders the respective fragments. This guarantees that global updates to navigation or metadata can be made in one place. 


inject("header-placeholder", "components/header.html");
inject("footer-placeholder", "components/footer.html");

This promotes DRY architecture and streamlines site-wide changes, especially helpful in larger documentation-driven projects.

Header Features

Sticky Position

The header remains fixed to the top of the viewport to ensure persistent access to site-wide navigation.

Theme Toggle

A button in the header toggles between light and dark themes. It persists preference using localStorage.

Mobile Toggle

On small screens, the sidebar is hidden and accessible via a hamburger button injected into the header.

Highlighting

Active pages are highlighted based on the data-page attribute, enabling consistent UX feedback.

Footer Characteristics

The footer serves both an aesthetic and functional purpose. Its structure is minimal, allowing the page to close cleanly and accessibly. It dynamically includes the current year and is fully theme-aware.

Current Year

A small inline script sets the current year using JavaScript to avoid yearly edits.

document.getElementById("year").textContent = new Date().getFullYear();

Minimal Aesthetic

There are no icons or verbose text. Just semantic HTML with appropriate spacing and alignment.

Semantic HTML Elements

The layout uses native <header> and <footer> tags. This improves screen reader performance, accessibility navigation, and SEO relevance.

Each region of the page maintains its proper role. Navigation is grouped together visually and programmatically, allowing assistive technology to skip directly to core content.

Why Dynamic Injection?

This method avoids duplicating header and footer code in every HTML file and enables future enhancements like site-wide alerts, banners, or language toggles from a single source.

Centralized Updates

Fix typos or add new links once. All pages reflect the update automatically.

Clean HTML Files

Your page content stays focused. Layout clutter is abstracted into component files.

Scalable

As the site grows, component reuse ensures consistent behavior across hundreds of pages.