How to use html from another file?

Question

I have a html file which is just my footer. How can I use this in another file? Do I need to use php?

I'm looking for something like this:

<section>
<p>site content</p>
</section>

<?php footer html from a different file goes here ?>

Will this include the styling and javascript that is referenced in the head of the file i'm getting the html from?

Thanks!

If `footer.php` doesn't have any php that needs executing you can use `` — Nick Parsons, Dec 19 '18 at 11:04
@NickParsons is there any noticeable performance difference in doing this? — treyBake, Dec 19 '18 at 11:05
@treyBake not entirely sure as I'm not a PHP expert, but I would imagine it would as it wouldn't need to be processed by PHP on the server side — Nick Parsons, Dec 19 '18 at 11:11
@NickParsons hmm.. might do some benchmarks and see what's what :) — treyBake, Dec 19 '18 at 11:11
@treyBake Okay, it would be intresting to see the outcome :) — Nick Parsons, Dec 19 '18 at 11:12
@Masivuye Cokile Unfortunately this does not include the styling. Is there any way to include that? — Ed AT, Dec 19 '18 at 11:14
@NickParsons you may add SSI as the third option to be compared — stckvrw, Dec 19 '18 at 11:22
@NickParsons http://codepad.org/mlQGP9qz <-- did some testing - ignore errors outputted :) — treyBake, Dec 19 '18 at 11:25

Ravi Chauhan · Answer 1 · 2018-12-19T11:06:16.147

-1

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

IN HTML

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    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>

IN PHP

<html>
<head>
<title></title>
</head>
<body>
<?php include('header.php'); ?>
<!--Remaining section-->
<?php include('footer.php'); ?>
</body>
</html>

edited Dec 19 '18 at 11:06

answered Dec 19 '18 at 11:05

Ravi Chauhan

1,409
13
26

Not sure I see the JS or jQuery tag in the question ... – treyBake Dec 19 '18 at 11:06
Is not it gonna be not SEO friendly ? – user2977799 Dec 19 '18 at 12:48

score -1 · Answer 2 · edited Dec 19 '18 at 11:15

-1

If you are using PHP you can require you can find more about it here.
If you don't want to use PHP you will have to use AJAX.
Example :

$.ajax({
    url: "yourHTMLFile.html",
    dataType: "html",
    success: function(data) {
     $("body").html(data);
    }
});

edited Dec 19 '18 at 11:15

Masivuye Cokile

4,754
3
19
34

answered Dec 19 '18 at 11:11

SIL0RAK

7
2
4

this requires use of jQuery - which not everyone wants to use – treyBake Dec 19 '18 at 11:17
also this is really counter-intuitive - much better to simply use include in PHP -will execute a lot faster ... – treyBake Dec 19 '18 at 11:25

How to use html from another file?

2 Answers2