HTML5 include file

Question

What is the best way - cross browser compatible to include an HTML file in HTML5.

I am building a site in HTML5 and would like to have the nav in one separate file and included in the site pages.

score 83 · Answer 1 · edited Nov 06 '16 at 02:59

83

Use the object tag:

<object name="foo" type="text/html" data="foo.inc"></object>

foo.inc should include valid HTML.

Note: do NOT use the self-closing <object/> style. That will prevent content after the tag from being displayed.

edited Nov 06 '16 at 02:59

Sridhar Sarnobat

25,183
12
93
106

answered Oct 19 '12 at 15:10

Rafa

1,437
11
7

1

Absolutely awesome, thank you for that! Works in Konqueror, Firefox, Chromium. What can one want more? :-) – greenoldman Oct 21 '12 at 07:22
this is no different than the iframe behaviour – Jinx Dec 28 '13 at 18:31
1

As @edom says, the [W3C validator](http://validator.w3.org/) doesn't like it and stuff after the "include" did not display (in Chrome, I did't test other browsers). W3C objected to the self closing tag. I replaced that by an ending `` and it validated and the following stuff displayed. – Mawg says reinstate Monica Feb 27 '14 at 02:23
1

I just tried this and it didn't work. Instead Chrome immediately downloaded foo.inc upon loading the page. WTF??? – Otto Sep 08 '14 at 18:16
1

While "cool", this isn't a good solution. HTML is not a preprocessor language. Object is not intended for this, and this behaviour is not guaranteed. – Tor Valamo Dec 25 '14 at 19:52
This works, but you would need to specify the size of the object you'll get scrollbars :). – RolandiXor May 28 '16 at 03:56
CSS wasn't applied to the included HTML for me. – Engin Yapici Aug 06 '16 at 17:22
This works IF AND ONLY IF you close object in a separate tag. If you use a self-closing tag it clobbers the rest of the document. – Sridhar Sarnobat Nov 06 '16 at 02:55
Could anybody explain, is it something different from just iframe? Both seems to be identical for me. – john c. j. Feb 24 '17 at 07:21
this is just like iframe, can't access anything inside – Dee Sep 03 '18 at 13:21
@TorValamo, why isn’t this good exactly? The standard says it “can represent a child browsing context”, so it’s exactly intended for something like this. And what do preprocessors have to do with any of that? – dakab Dec 04 '21 at 19:53

score 53 · Answer 2 · answered Dec 07 '12 at 20:12

53

<object> works fine, although it is not a self-closing tag, so it should look like this (otherwise it's not valid HTML5):

<object name="foo" type="text/html" data="foo.inc"></object>

<embed> can also be used for including external html content (and any MIME type):

<embed type="text/html" src="foo.inc">

answered Dec 07 '12 at 20:12

edom

631
5
3

1

+1 You should be awarded the answer (19 up votes on the question & no answer awarded ?!). The closing tag *is* required in HTML 5, else any following stuff is not displayed (in Chrome, I didn't test others) – Mawg says reinstate Monica Feb 27 '14 at 02:24
Also wrong, per the html5 spec. While it "works" (the spec doesn't discriminate between mime types), embed is not intended for this. Its intended use is for non-html elements such as plugin elements. – Tor Valamo Dec 25 '14 at 19:55
3

For neither – Engin Yapici Aug 06 '16 at 17:22
I only see the html code in the browser not the interpreted code. – theking2 Dec 09 '22 at 08:06

score 5 · Answer 3 · answered Jan 08 '17 at 10:16

5

For HTML5 you can try:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)

If this feature is not implemented in a target browser you can use webcomponents polyfill: http://webcomponents.org/polyfills/

answered Jan 08 '17 at 10:16

dennis

620
8
21

1

Client-side it is deprecated. But doesn't have to be server-side. Still looking for server to compile this into one page (templating). And polyfill for when opening it directly in a browser (development). Future, I see the server doing the hand-shake whether to serve the partial html files or to compile them into one site. – TamusJRoyce Dec 19 '18 at 13:33

score 3 · Answer 4 · answered Dec 25 '14 at 20:00

The correct way is to use server side includes. The PHP solution requires PHP to be installed just for including files, the html solutions are not supported by the spec even though they work (the spec doesn't discriminate between mime types, but it does specify its intention, which means it could be explicitly prevented in the future, if those tags aren't just entirely deprecated).

Here's my post from a similar thread asking about the same thing:

If your server supports SSI (server side includes) you can put the following in your html-files without needing a scripting language or whatever. Apache has SSI enabled by default (I think?)

<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->

"file" is relative to the current file, and probably what you would use for including related files like "relevant_article_poll.html".

"virtual" is relative to document root (ie, your website root) and you would use it for including global files, like headers and footers.

Doesn't really matter which one you choose, but it's useful to know the difference between the two.

Also, the include directive makes a new internal http request to the server for each file, so you could include php files and the likes and they would be executed as they should.

Here's a useful overview of SSI: http://en.wikipedia.org/wiki/Server_Side_Includes

Just a short note on an old answer to say that `nginx` can also be configured to support SSI — usually with just the one-liner `ssi on;` (but of course you can use that command in a much more complex context). — Gwyneth Llewelyn, Apr 26 '20 at 22:00
Ah, server side includes... wouldn't recommend this as you have to test it live on a server and some don't even support PHP. I tried this and it failed bitterly (with no error but nothing happening). — Ben the Coder, May 30 '23 at 01:13

score 3 · Answer 5 · answered Dec 06 '11 at 13:39

3

If you're writing pure HTML, include files aren't possible. However, you can use Apache's server-side includes (SSI) feature, or you can use some scripting language (Python, Ruby, PHP, etc.) to assemble the pages.

answered Dec 06 '11 at 13:39

Scott Severance

943
10
27

+1 ...and browser compatibility isn't a factor. (As far as the inclusion; if your HTML itself is bad, that's another thing.) – Su' Dec 06 '11 at 14:00
Javascript would also be an option. Sits somewhere between SSI and server side scripting languages. If Javascript is disabled there is a huge problem however if it is the navigation. – Saif Bechan Dec 06 '11 at 15:00
+1 This should be the correct answer. It's easy to achive and it works with all browsers and has a long history of stability. – bestprogrammerintheworld Jul 30 '16 at 23:33
I'd downvote this but I don't want to lose rep. This is not a correct answer! As you can see from [the accepted answer to this qustion](https://stackoverflow.com/a/12977210/20585541), it can be done very easily. If you're against the ` – Ben the Coder May 30 '23 at 01:11

d8ressa · Answer 6 · 2015-02-21T11:42:58.930

2

Ok, these are all valid answers, but except the javascript method the others are quite limited.

The php one is strictly bound to the provider.
The object and the embed, instead, include the code without any style (except if you declare it in the included file).

So I mean that's not good enought as the php or asp include which works fine but needs a server that supports it.

edited Feb 21 '15 at 11:42

answered Mar 03 '13 at 17:09

d8ressa

21
2

+1--This was just what I was thinking when I read all the other answers, though I wouldn't say that the ` – Ben the Coder May 30 '23 at 01:17

score 0 · Answer 7 · edited May 07 '13 at 02:33

0

I'm not aware of any way of doing it in HTML, but if you were to do it in PHP, it's simple enough, if you had a certain nav bar you wanted included in every page you'd just put:

<?php include('nav.php') ?>

Putting the HTML code in a seperate page for the nav, and the PHP would automatically slam it in there each time. And you don't have to know PHP to make PHP pages per se, you can just use general HTML markup in a PHP file and it'll work fine.

edited May 07 '13 at 02:33

Dom

3,173
4
30
39

answered Dec 06 '11 at 13:55

Aaron Lee

1,146
3
14
29

3

Super useful except for the million and one projects where you can't use PHP. – Code Whisperer Jul 18 '13 at 14:01
The absurdity of this entire issue -- that there is no built-in functionality for including html cannot be overstated. I haven't worked in a language without a preprocessor directive for including files in decades other than HTML. – RegularExpression Sep 25 '17 at 20:56

score -12 · Answer 8 · answered Jun 12 '12 at 07:01

HTML5 is made out of 3 components: HTML, CSS and JavaScript. So we have to use all of them to take advantage of HTML5.

External HTML code can be included in another html document using javascript. The only thing is, you have to store external code in .js file. Here is an example how to include html paragraph:

<!DOCTYPE html>
<html>
    <head>
    <title>Main Page</title>
        <script type="text/javascript" src="include_html.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            paragraph();
        </script>
    </body>
</html>

Contents of include_html.js

function paragraph()
{
        document.write("<p> This is an HTML paragraph </p>");
}

No, HTML5 is made out of 1 component: [HTML5](http://www.w3.org/TR/2011/WD-html5-20110525/). It is a standard in its own right. — James Allardice, Jun 12 '12 at 07:34

HTML5 include file

8 Answers8

Linked

Related