There are two ways to do this.
One is server side includes which involves configuring your Apache server to support server side includes and then adding SSI commands to your HTML pages like
<!--#include virtual="/footer.html" --> to signal to Apache that the file
/footer.html has to be included at that spot. This involves a little processing on Apache as it has to effectively stitch the final page together based on the SSI commands being added. I have worked with SSI's in the past and while I can't identify a particular fault with them (they do in fact serve a purpose and can be useful depending on the use case) I found that it could be difficult at times. One thing to note here is that the default settings are for any web page that has SSI commands in it needs to be named with the file extension
.shtml in order for Apache to identify that the page has server side include commands. Servers can be configured to treat all HTML pages as potentially having server side includes however this is generally considered bad practice as it increases the load on the server maginally but measurably as the Apache process has to go through each html page that it serves to check if the page has any server side include commands. On shared hosting generally you will be confined to using the standard
.shtml file extension but some shared hosting providers will let you define what file extensions to treat as containing server side includes.
The other way (this is the way I tend to prefer these days) is to use AJAX. In the page that I am trying to import given HTML into I specify a location in the document (usually denoted by a
<div> tag or something similar) and give it a reference (like an
jQuery.load() API enables you to choose a child element from the page being requested over AJAX so that only that element and children elements under it are added, instead of adding the whole page and removing elements after the fact, which also allows you to avoid the issue of needing to have a different file for each variation that may be called upon.
footer.html being included on all pages, but
footer.html also has SSI include commands) the marginal increase in time to first byte is unlikely to make a difference to SEO ranking. There is no hard and fast way to measure and quantify this though as it depends on the extent to which SSI commands are used, the nature of the SSI commands themselves, and the amount of work that Apache has to do in order to stitch the page together.
Which one you use is largely a case of personal preference and experience. Sometimes an extremely restrictive shared hosting environment will require you to use AJAX instead of server side includes however many of the larger shared hosting providers allow server side includes as standard.
Delving into how to incorporate either technology is someone beyond the context of this post (whole books can and have been written on both technologies) but some useful places to start looking are...
Additional Note 1