Include html file in html using html5
Surprisingly, the same question was asked and it is possible: HTML5 include file
Rafa's answer:
Use the object tag:
<object name="foo" type="text/html" data="foo.inc"></object>
foo.inc should include valid HTML.
I tested it on Konqueror, Firefox and Chromium.
Note you must use a separate </object>
tag otherwise any content after it gets discarded.
If you find it useful (I do), please upvote Rafa answer (not mine) because "it is not possible" is spreading like disease.
Include another HTML file in a HTML file
In my opinion the best solution uses jQuery:
a.html
:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html
:
<p>This is my include file</p>
This method is a simple and clean solution to my problem.
The jQuery .load()
documentation is here.
HTML5 include text file
Not with HTML alone, you'd have to use a server side language like PHP and do a basic include, or potentially you could use javascript to fetch the content with Ajax.
Offline HTML5 .html pages - need to include file into another file
You could put an empty div
<div id="navigation"></div>
And then "load" that with jQuery
$("#navigation").load("path/to/nav/file.html");
Is there a way to import HTML into an HTML file?
Edit:
An option worthwhile exploring is the object
tag. You can include another file (of any kind) onto your page.
This seems like a more suitable option compared to the rest of options below.
<object type="text/html" data="file.html"></object>
It works on similar basis as HTML5 Import.
The object
tag is part of HTML 4 therefore it's supported since IE6+, Firefox 2+, Chrome 1+ etc.
Using HTML5 Import. It does have very limited support/browsers implementing it.
<link href="extern.html" rel="import" />
Other than that you will need Javascript at bare minimum to import another file if you want to do it from client-side. There are variety of options available to do it from back-end depending on your tech.
Another possibility as Pete highlighted is the use of iframes (although I would prefer not to use them).
The use of HTML5 Imports is highly discouraged as you can see on here.
Here's few notes taken from the above link:
MS Edge status: Under Consideration
Chrome status: Deprecated
Firefox status: not-planned
WebKit status: Not Considering
Firefox has no plans to support HTML imports though for now it can be enabled through the "dom.webcomponents.enabled" preference in about:config
Include html in another html file
Method 1:
I think it would be best way to include an html content/file into another html file using jQuery.
You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");
For example
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#DivContent").load("another_file.html");
});
</script>
</head>
<body>
<div id="DivContent"></div>
</body>
</html>
Method 2:
There are no such tags available to include the file but there are some third party methods available like this:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Method 3:
Some people also used server-side-includes (SSI):
<!--#include virtual="a.html" -->
Related Topics
How to Change the Default Index Page in Apache
Unskewing the Ends of an Assortment Multiple Skewed Images
Embed a Powerpoint in a Web Page
What Are the Priorities Among CSS Selectors
How to Align Entire HTML Body to the Center
Gmail Blocking Small Embedded Inline Images in Email Template
Controlling Image Load Order in HTML
Why Use Schema.Org Microdata to Mark Up Web Page Elements
Using Thymeleaf When the Value Is Null
HTML + CSS: Ordered List Without the Period
Place Boxes Inside Ul in Center, But Align Them Left
Why Do Firefox and Opera Ignore Max-Width Inside of Display: Table-Cell
Does a Name Attribute Have to Be Unique in a HTML Document
Denoting a Preferred Place for a Line Break