Common Header/Footer With Static Html

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.

how to use default wordpress header and footer in static html page

You need all those pages in .php extension add the following native function get_header get_footer on all those static pages and your header and footer will appear.

facts.php

require '../../wp-load.php';

<?php get_header(); ?>

   echo "<html>
    <body>
    <h1> FACTS </h1>
    </body>
    </html>";

<?php get_footer(); ?>

Is it Possible common header/footer for all web pages using with static site generater

I can't answer for all static site generators, but for Eleventy you would use a layout file. This is documented well but here's an example.

First, ensure you've got an _includes folder, this is where Eleventy looks for layouts and includes by default. (You can change this.) Create a layout file using the template language of your choice, so for example: main.liquid:

<html>
<head>
</head>

<body>
{{ content }}
</body>
</html>

In this template, the contents of your page will be in the content variable. To use this layout, in your regular markdown files, reference it in the front matter:

---
layout: main
---

## Hello World

Im markdown!

This assumes you want a "wrapper" for your layout. You can also just create a file called header.liquid (or use the extension of the template language you prefer) and footer.liquid and then include them from your files.

Eleventy is very flexible and gives you a lot of options.

How to deal with a static header/footer with 10+ pages?

You need to create separate header and footer html files and than need to include these files on all pages. In this way you can control this.

Check below how to include an html file in another html file

http://www.w3schools.com/howto/howto_html_include.asp

Include another HTML file in a HTML file html-file

http://www.hongkiat.com/blog/html-import/

Another way you can create php files instead of html and include common php files in another easily

http://www.w3schools.com/php/php_includes.asp

Static Html pages with same header / footer included

there is a whole slew of software that should cater your needs. static site generator should be a good search string on google. my personal preference would be the ruby based nanoc but many others exist. Assemble also looks very nice and features a yeoman generator.