HTML5 includes file

Question

HTML5 includes file

What is the best way to use a cross browser to include an HTML file in HTML5.

I create a site in HTML5 and would like to have navigation in one separate file and be included in the pages of the site.

+47

html5

Roula Dec 06 2018-11-12T00:

source share

8 answers

Rafa · Answer 1 · 2012-10-19 15:10

Use the object tag:

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

foo.inc must include valid HTML.

Note. DO NOT use the <object/> self-closing style. This will prevent content from being displayed after the tag is displayed.

edom · Answer 2 · 2012-12-07 20:12

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

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

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

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

dennis · Answer 3 · 2017-01-08 10:16

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 function is not implemented in the target browser, you can use the polyfill web components: http://webcomponents.org/polyfills/

Scott Severance · Answer 4 · 2011-12-06 13:39

If you write pure HTML, including files is not possible. However, you can use the Apache server side function (SSI), or you can use some scripting languages (Python, Ruby, PHP, etc.) to build pages.

d8ressa · Answer 5 · 2013-03-03 17:09

Well, these are all valid answers, but other than the javascript method, the rest are pretty limited.

The php string is strictly tied to the provider.
the object and embed instead include code without any style (unless you declare it in the included file).

Therefore, I mean, that is not good enough, since php or asp include , which works fine, but needs a server that supports it.

Tor Valamo · Answer 6 · 2014-12-25 20:00

The correct way is to use the server side. A PHP solution requires that PHP be installed only to include files, html solutions are not supported by the specification, even if they work (the specification does not distinguish between mime types, but it indicates its intention, which means that it can be explicitly prevented in the future, if these tags are not just completely out of date).

Here is my post from a similar topic asking about the same:

If your server supports SSI (server side), you can put the following into your html files without requiring a scripting language or anything else. Apache has SSI enabled by default (I think?)

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

“file” refers to the current file and probably what you will use to include related files, such as “actual_article_poll.html”.

"virtual" refers to the root of the document (i.e. to the root of your site), and you will use it to include global files such as headers and footers.

It does not matter which one you choose, but it is useful to know the difference between them.

In addition, the include directive makes a new internal HTTP request for the server for each file, so you can include php files and the like, and they will be executed as they should.

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

Aaron Lee · Answer 7 · 2011-12-06 13:55

I don’t know how to do this in HTML, but if you did it in PHP, it’s easy enough if you had a specific navigation bar that you wanted to include on every page that you just put:

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

Put the HTML code on a separate page for the navigator, and PHP will automatically put it there every time. And you don’t need to know PHP to create PHP pages as such, you can just use the general HTML markup in the PHP file and it will work fine.

Goa · Answer 8 · 2012-06-12 07:01

HTML5 has three components: HTML, CSS, and JavaScript. Therefore, we must use them all to use HTML5.

External HTML code can be included in another html document using javascript. The only thing you have to store external code in a .js file. Here is an example of how to include an 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>

Content include_html.js

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

HTML5 includes file

More articles: