just wondering if there was like a stylesheet for 'html'. What if I have a second 'html' file which contains a lot of the same 'html' as the first one. Instead of copying and pasting all the different bit can I use something like a stylesheet to store and make that 'html' appear on the second page?
Asked
Active
Viewed 48 times
0
-
3http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Andrew Truckle Mar 27 '16 at 06:02
2 Answers
1
PHP METHOD: Just rename your html file from fileName.html
to fileName.php
so you can use php include
for templating your site.
Here's an example of keeping the same navbar, say navbar.php
on all pages:
navbar.php:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
The above will be added to every page including the file.
INDEX.PHP:
<div class="nav">
<?php include("pathTofile/navbar.php"); ?>
</div>
<div class="banner">
....
</div>
ABOUT.PHP:
<div class="nav">
<?php include("pathTofile/navbar.php"); ?>
</div>
<div class="someDiv">
....
</div>
CONTACT.PHP:
<div class="nav">
<?php include("pathTofile/navbar.php"); ?>
</div>
<div class="someDiv">
....
</div>
So if you need to make some edit to your navbar, you can just edit the navbar.php
file and the changes will be reflected on all pages.

AndrewL64
- 15,794
- 8
- 47
- 79
-
-
@Reddy Agreed. But this method is the cleanest method to achieve what he want. But if he sees this and states that he doesn't want to use PHP, then I will delete this :) Cheers – AndrewL64 Mar 27 '16 at 06:33
-
1this will limit the idea to only Php users. I think using jquery you can just say `$('div').load()`. it would be acceptable by wide crowd. – Rajshekar Reddy Mar 27 '16 at 06:35
-
1@Reddy Googling it now. Will incorporate it to the answer too. Thanks for the heads up bro. – AndrewL64 Mar 27 '16 at 06:41
0
This isn't possible using HTML alone but many server-side and client-side frameworks like PHP, Node.js, and Django allow you to insert one HTML file into another for example using the same header across a website.
Or you could use JavaScript to import the file. Here is an example using the jQuery library:
<html>
<head>
<script>
$("#header").load("header.html");
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>

Philip Kirkbride
- 21,381
- 38
- 125
- 225