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

Question

How do I deal with a static header/footer that doesn't change within my 10+ pages. Keep in mind all these pages share the same header/footer. So currently If I change one content from the header/footer I would need to go to all other pages in order to make the same changes.

What I'm hoping to achieve is basically to change once and have the change reflected on all pages.

I was thinking of adding the header/footer (HTML) in a .txt file and calling that .txt file JavaScript way. But I'm pretty sure its bad practice and a security risk to have html in a .txt file and too call that .txt file through js.

Answer 1

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

Answer 2

You could use an angular directive.

var myApp = angular.module('myApp', []);

myApp.directive('mainNavigation', function(){
  return {
    restrict: 'E',
    templateUrl: 'partials/navigation.html'
  }
});

Then you would use ng-app="myApp to call angular and then include the directives in the areas you need them. In this case you would have:

<main-navigation></main-navigation>

Answer 3

You could use jQuery's .load() function.

Just keep in mind this will add two additional calls to the server on every page request. ( api.jquery.com/load )

 // add this snippet somewhere in your page (inside <script> tags) $(function() { $("header").load("header-url"); $("footer").load("footer-url"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> Header </header> <hr/> <div id="content"> static page content goes here </div> <hr/> <footer>copyright</footer>