Make Header and Footer Files to Be Included in Multiple HTML Pages

Make header and footer files to be included in multiple html pages

You can accomplish this with jquery.

Place this code in index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

and put this code in header.html and footer.html, at the same location as index.html

<a href="http://www.google.com">click here for google</a>

Now, when you visit index.html, you should be able to click the link tags.

Common Header / Footer with static HTML

There are three ways to do what you want

Server Script

This includes something like php, asp, jsp.... But you said no to that

Server Side Includes

Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.

Client Side Include

This solutions has you calling back to the server after page has already been loaded on the client.

Include header.html to include multiple html pages

you can make a php file like this. I expect you want the <head> staying the same as well

<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

then you can choose between different main content files depending on the $_GET using a if statement

<?php
$header = file_get_contents('header.html');

if($_GET['page'] == 'home'){
   $main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
   $main = file_get_contents('contact.html');
}

$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

How to add the same header and footer to all pages at once? HTML

you can put them in php files, header.php and footer.php

and then just include them wherever you want

<?php include('header.php') ?>

html code

<?php include('footer.php') ?>

Make Header and Footer Files to Be Included in Multiple HTML Pages