I was wondering wether there is a way to include some html content inside another html using only html?
A replacement to PHP's
<?php include("file.php"); ?>
Is this possible?
EDIT:
This has brought up some confusion, what I needed was "almost an html tag" that had the functionality of including a html document in another.
Have you tried:
<object type="text/html" data="file.html"></object>
It cannot be done purely by HTML. (There are iframes, however, but I don't think that qualifies in this case.)
It can be done using JavaScript. You get the other file via Ajax, and place its contents inside an HTML element on the current page.
Shameless plug of a library that I wrote the solve this.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.
HTML does not have a feature to include additional content natively. However most web servers do have server-side include statements:
SSI in Apache
SSI in IIS
the only thing would be an iframe which is pure html. but you also can use javascript to get the page via ajax and include it into your dom hirarchy
Yes there is but you need to enable it in your config or .htaccess:
Options +Includes
AddType text/html .shtml
AddHandler server-parsed .shtml
Of course with that youd need to rename any file doing the including to .shtml... or you could jsut use:
Options +Includes
AddType text/html .html
AddHandler server-parsed .html
the syntax itself is similar to comment:
<!--#include virtual="/footer.html" -->
There's no such thing. You'd have to use a server-side scripting language or JavaScript to do something like this.
This might be a few years late but this is how i did it !
in the first line after put this line !
<SCRIPT LANGUAGE="JavaScript" src="http://yourdomain.com/header.js">
then create a file called "header.js" and enter the content of the file you want to include ! like so....
<!-- Begin
document.write('<center>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<hr>');
document.write('</center>');
// End -->
Hope this help !
Almost 10 years later, some people may still have doubts about this. So I'm going to explain a simple solution that we have today in 2020.
I always use the jquery .load() function and never had a problem with that.
Exemple: ( "#content" ).load( "includes/menu.html" );
The lack of Include\Import in Html is really frustrating!
A good alternative is "Server Side Includes (SSI)" in case "PHP" is not supported!
SSI is supported by almost any (if not all) web host server!
<!--#include virtual="layout.html" -->
The file that contains the above line must end with ".shtml" or ".shtm" extensions!
It's really annoying that something as easy as Include\Import can't be performed by the browser itself!
Like php or Node.js, preprocessing the html using Javascript itself before the HTML Load process start should be supported in any browser!
Now in 2022 I use Vanilla Javascript fetch().
This is how to include file: "newfile.html" into div: "container"
// HTML
<div id="container"></div>
// JS
const loadHtmlFile = (fileName, containerId) => {
fetch(fileName).then(function (response) {
return response.text();
}).then(function (html) {
containerId.innerHTML = html;
}).catch(function (err) {
console.warn('Something went wrong.', err);
});
}
loadHtmlFile("newfile.html", container)
