0

If we want to run the same html header code on several pages, can we have a external html file or link to the existing header code instead of having the same code written in every page?

MGItkin
  • 380
  • 2
  • 5
  • 13
  • 1
    If you're using a backend language, it would be preferable for you to do it server side rather than client side. If you're using PHP, you can use [include](http://php.net/manual/en/function.include.php) – Tim Aug 15 '15 at 06:31
  • I was going to suggest that doing this via JS is generally a really bad idea for common pieces. You should probably use a server-side framework or generation tool for this. – Tracker1 Aug 15 '15 at 07:20

2 Answers2

4

You could do it with jquery. Put this code in index.html

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></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 the index.html

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

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

shas
  • 703
  • 2
  • 8
  • 31
0

You can use IFRAME to load content of any other HTML page in your current html page.

<html>
    <head>
        YOUR CSS GOES HERE
    </head>
    <body>
        ANY TEXT YOU WANT
        <iframe src="PATH TO OTHER HTML PAGE">
        </iframe>
    </body>
</html>
Sanjay Panchal
  • 540
  • 2
  • 8
  • 20
  • This works, however, it isn't a very elegant way of including another file. It should be done server side via something like `include()`, or if need be, client side with something like @shas recommended. – Tim Aug 15 '15 at 06:33