Joining Two different HTML file in single HTML file

Question

I want to generate three pages in html 1.header 2.container 3.footer in different html pages And last i want to integrate all 3 html page in single page as index.html.

Please tell me how will i do this??

What language/framework are you using to build the web page? Or, are you literally writing raw HTML files? — Tom Lord, Jul 01 '16 at 08:34

score 0 · Answer 1 · answered Jul 01 '16 at 08:28

0

You can done this with angularjs easily using ng-include directive to learn about this follow below link.

Combine multiple html

answered Jul 01 '16 at 08:28

Nikhil.Patel

893
7
17

without angularjs how we use it?? – Jadu Jul 02 '16 at 07:24

score 0 · Answer 2 · edited May 23 '17 at 12:08

Use jQuery, https://stackoverflow.com/a/18712605/6385066
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>

You can reuse the function for all your pages to include your header and footer.

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

Please try the below method

<html>
  <head>
    <title>test page</title>
    <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  </head>
  <body>
    <div id="header"></div>
    <br />
    <div id="content">
      Main Content
    </div>
    <br />
    <div id="footer"></div>
    <script>
      $("#header").load("header.html");
      $("#footer").load("footer.html");
    </script>
  </body>
</html>

Would suggest you to go through the below links as well

edited May 23 '17 at 12:32

Community

1
1

answered Jul 01 '16 at 08:34

Gauthaman Sahadevan

851
1
11
16

But how we write header.html and footer.html Is we write hole html, head, body tag ??? – Jadu Jul 02 '16 at 07:20
it is not required to add the whole html along with all the html, head and body tags. only the required tags would do the job for you. as such you would have all those tags in your main html file. – Gauthaman Sahadevan Jul 02 '16 at 17:56
It mean we have to write CSS and Script In main file ?? – Jadu Jul 05 '16 at 09:46
Yes. Include your CSS and JS script files in the main file and have only the code for header and footer in the respective html files. – Gauthaman Sahadevan Jul 05 '16 at 09:51
OK thanks it is important for me thanks thanks a lot.. – Jadu Jul 05 '16 at 11:16

Joining Two different HTML file in single HTML file

3 Answers3