21

I have 2 HTML files, suppose a.html and b.html. In a.html I want to include b.html.

In JSF I can do it like that:

<ui:include src="b.xhtml" />

It means that inside a.xhtml file, I can include b.xhtml.

How can we do it in *.html file?

using html 5 (if it can be done at all in html 5).

lolo
  • 17,392
  • 9
  • 25
  • 49

4 Answers4

42

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.

Community
  • 1
  • 1
greenoldman
  • 16,895
  • 26
  • 119
  • 185
  • 6
    It's a horrible thing to do. – Ian Devlin Apr 23 '13 at 15:22
  • 1
    Very useful for design mockups... – Magnus Jun 17 '13 at 15:38
  • 2
    +1 BUT 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:20
  • HTML is not a preprocessor language. This solution is unstable and correct behaviour is not guaranteed. – Tor Valamo Dec 25 '14 at 19:49
  • As @Mawg says, this doesn't work. It clobbers everything after the include (on both Chrome and Safari). I don't see why not being a preprocessor language matters. It reflects a very real programmer's need and is shocking it's still not supported. I wanted to do this 15 years ago and was in exactly the same position. – Sridhar Sarnobat Nov 06 '16 at 02:53
  • 1
    I later realized that this DOES work if you use a separate `` tag. Hopefully my edit to this answer gets approved. Apologies for the downvote and upvoting the "it can't be done" answer neither of which I can undo. – Sridhar Sarnobat Nov 14 '16 at 07:51
  • 10
    Ian Devlin - Saying "It's a horrible things to do." does not seem useful. If horrible, then why is that? (I.e., if the answer is that there are better alternatives, say what they are. Are you thinking server side includes? Including files with script (js, php, ruby)? If you have a better way, say what that is, or say nothing at all. And BTW, in my estimation, the alternatives all have significant downsides, mostly more complicated code (if someone only knows HTML) and potentially "server-lack-of-control" that make this approach something to consider. – codenoob Sep 02 '17 at 14:21
  • this is just the same like iframe, can't access anything inside object tag – Dee Sep 03 '18 at 13:20
  • It doesn't for me unless you change the extension of `foo.inc` file to `foo.html`, this will parse the html content and create a full `` inside your DOM. – Ibrahim.H Dec 05 '20 at 08:35
7

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

Tor Valamo
  • 33,261
  • 11
  • 73
  • 81
  • This is a great and simple options for FE Devs who are developing prototypes. It makes it so much easier to breakdown the mark-up for component development in another framework, i.e. AEM. – Roralee Aug 22 '17 at 22:01
3

To use the PHP include function in HTML5, you just have to edit your .htaccess file as follows:

    <Files *.html>
ForceType application/x-httpd-php
</Files>

Now you can use any PHP code in your html file like this:

<?php include 'menu.html'; ?>

Cheers ;)

Danny Verbiest
  • 47
  • 6
1

HTML5 is no different from HTML 4.01 in this sense in that this simply can't be done without scripting of some sort.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • 3
    The HTML language (of any version) is merely intended to be a system for interlinking documents. The two main languages that bolt onto HTML are CSS, which is intended to visually style a document, and JavaScript, which is the only scriptable part that can handle stuff like reading a file and inserting its contents into a HTML document. Serverside scripting is the best solution for including files however, as this can be done before the HTML document is sent to the client. Simply put, HTML cannot do includes because it was never designed to, and doesnt need to as other languages do this instead – Jimmery Jan 27 '12 at 10:36