Html5 Include File

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



Leave a reply



Submit