How to have same header and footer on multiple HTML pages

I’m in charge of maintaining an in-house website (intranet) for a small group of people within my company. I previously used a program called WYSIWYG Web Builder (WWB) to publish the site to a local drive that all the users had access to. Using WWB was nice because I was able to have a template page that was then used for all the pages of the website. This template page had the header menus and the footer and they were then automatically incorporated into all the other pages when I would publish the site. Obviously this is very useful because it means I only had to make changes to the header in one place, then those changes would show up on all the pages of the website.

I’m trying to move away from WWB because I’ve been learning so much about coding websites from scratch, and I don’t want to be bogged down by all the restrictions that are inherent in using WWB’s tools. I’ve therefore used the Bootstrap framework to create a header for our internal website, but I am wondering what the best way is to incorporate this header across all the pages on our website.

Is there a program that could be used to do something like this, but keeps the original HTML code clean?

Should I use JavaScript/jQuery to insert the same HTML into each page?

I’m trying to avoid any complicated “black-box” stuff like having to install APACHE and converting all my web pages to PHP which is something I’ve seen suggested elsewhere.

I’m open to any and all suggestions for the best way to attack this problem.


that is precisely what you need to do. HTML itself can’t do this.

PHP (python, ruby and many more) can merge the header, body and footer into a single html file, and send that to the client.

The alternative is to use Jquery/javascript with ajax to fetch only the body, and update the webpage dynamic.

Thanks for the reply, @stetim94. In that case, do you have any suggestions for learning how to use APACHE and PHP effectively?

Practice, and then ideally someone more senior to help you with the rookie mistakes.

Actually you can just use “include”

That is one of the problems with PHP, its real simple to implement a simple solution (like include) not foreseeing the consequences this will bring further down the road.

1 Like