Is there a way with HTML to call to another file? Similar to php include?

Question

is there an HTML non-php way of calling to a file? For example, I am working on a large site that I don't want to have to edit each page when I want to edit the menu, footer, etc. Sort of like how wordpress uses php to include the header/menu data, I'd like to have one file to edit, but without using php. I don't know how possible this is. I am developing the site with HTML5/Bootstrap/JS and would like to avoid php if possible!

This has been answered here http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Arlind, Apr 08 '15 at 22:59

Funk Forty Niner · Answer 1 · 2015-04-08T23:32:28.597

One method you can use is the .shtml file extension.

It also has SSI capabilities and is server-side, not client-side, therefore it runs off the server.

Server Side Includes (SSI)

Basic syntax to include files is:





You can also include other files inside included files.

For example, say you have a header file  and you want to include a navigation bar, you just do

header.shtml would contain 

all inside the same file, say you call it index.shtml

index.shtml would contain this structure

<!doctype html>
<head>
    <!--#include virtual="/js_files.shtml" -->
    <!--#include virtual="/metatags.shtml" -->
    <title>
    <!--#include virtual="/title.shtml" -->
    </title>
</head>

<body>
    <!--#include virtual="/header.shtml" -->
    <div>Hello world!</div>
    <!--#include virtual="/footer.shtml" -->

</body>
</html>

and inside 

you could have this tag included in there 

containing

<a href="index.shtml">Home</a> - 
<a href="about.shtml">About</a> - 
<a href="contact.shtml">Info</a>

By using the same or similar structure for all your files, any change you make to one (include) file, will be affected globally throughout the site.
This is a method I use myself for certain websites where PHP isn't a requirement and have used for many years and works quite well, including Bootstrap-based.

References:

score 0 · Answer 2 · answered Apr 08 '15 at 22:57

If your are already using java script lets just use JQuery

Using jQuery:

index.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#header").load("header.html"); 
      $("#footer").load("footer.html");
    });
    </script> 
  </head> 

  <body> 
     <div id="header"></div>
     <div id="footer"></div>
  </body> 
</html>

header.html

<p><b> This is my header file </b></p>

footer.html

<p><b> This is my footer file!</b></p>

score 0 · Answer 3 · answered Apr 08 '15 at 23:27

0

You can use an iframe to include one HTML page inside another page.

answered Apr 08 '15 at 23:27

Lie Ryan

55,117
12
87
139

Is there a way with HTML to call to another file? Similar to php include?

3 Answers3