Introduction
In 1999, when this site was first written, I didn't give the menu system used on the pages as much thought as I should have and added the menus as static links on each page. This worked well while there were not many pages:
This site's original menu system
The problem with them was that as I added more sections and pages to the site then whenever the menus needed changing then I would use a multi-file search and replace program such as Ecobyte's BK ReplaceEm (Internet Archive), which was later renamed to Replace Text to change the menus then upload all the changed files to the server.
Needless to say, this got to be tedious and when I started self-hosting the site in June 2003, I started using the Apache server's server side includes (SSIs). These have worked so well for me that 22 years later, in July 2005, I am still using them.
This page was written to explore the various methods of including reusable HTML pages such as menus and footers into a sites main web pages.
Stages
There are several stages at which the work of adding the various files to create a complete web page can be carried out.
The various parts of a page can be processed to create the complete HTML page which is then uploaded to a server. This is the fastest method of serving the complete page.
The complete HTML page can be created as it is being served.
The main parts of the page can be downloaded from the server and then processed by the browser to download the remaining parts. This is the slowest method of producing the complete page.
Preprocessing
There are two types of preprocessors, Static Site Generators (SSGs) and Template Engines.
The purpose of the two are slightly different, SSGs are used to create static pages, while Template Engines allow some interaction between the visitor and the site. An advantage of thes etype of programs is that the completed web pages can be uploaded to any server and work.
There are hundreds of SSGs around, but the most I see mention of most often are Astro, Eleventy (aka 11ty), Hugo, Jekyll, and Next.JS. An advantage of using these is that the processing takes place on your computer and you just need to upload the completed HTML files to the server.
Then there are the various server-side, JavaScript frameworks and the various Content Management Systems (CMSs).
Dynamic Includes
By a "dynamic include" I mean a system where the pages are completed as they are served. The web servers I know of such as Apache, IIS, NGINX and others have this capability.
Some languages such as PHP have an include or import statement that can be added when run.
Content Management Systems (CMSs) work by creating a complete HTML file and all can create such things as menus and footers.
To use any of the above methods you must have access to the server in order to configure it properly.
Post Loading
Menus and other code can be inserted into a page after it has been downloaded by using an iframe. There are some problems associated with iframes such as a small performance decline, but they can still be useful.
Scott Jehl has some interesting ideas on using iframes to include content.
When using iframes remember to make the links in it target the main HTML page that hosts the iframe otherwise the content of the iframe will be replaced by whatever page the link points to. This can be done by using target="_parent" or target="_top" in the a href link.
JavaScript can also be used to insert items such as menus and footers. An example is given on JW3Schools, or Akash's answer on Stack Overflow which uses JavaScript's insertAdjacentHTML method can be used.
Paul Browne wrote a small JavaScript library to include content into HTML files.
Web Components are a method to create an encapsulated, single-responsibility code block that can be reused on any page. They are widely accepted by browsers. See the article on Free Code Camp to learn how to use them to include a header and footer on a page.
Sources and Resources
A Complete Introduction to Web Components - Kinsta
Comparison of web template engines - Wikipedia
Element: insertAdjacentHTML() method - MDN Web Docs
HTML DOM Element insertAdjacentHTML() - W3Schools
HTML Includes That Work Today - Filament Group
HTMLInclude - GitHub - a small JS library written by Paul Browne
How TO - Include HTML - W2Schools
The Inline Frame element - MDN Web Docs
Introduction to Server Side Includes - Apache
Reusable HTML Components - How to Reuse a Header and Footer on a Website - Free Code Camp
Site generators - A list of static generators - Jamstack
Static site generator - Wikipedia
The Simplest Ways to Handle HTML Includes - CSS Tricks
Web Components - MDN Web Docs