Let's say for example that I'm building a website with many sections and I wanted these sections to be modular, so each section is it's own html file. So basically I could include this little module anywhere I want on the main html file or maybe I could simply include navbars and footers onto other HTML pages without having to rewrite lines of code.
Is this possible with just HTML alone?
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
No, this cannot be done with plain HTML.
Alternatives:
You can't do it with plain HTML but you can use javascript inside script tag in your html file like this jQuery example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#header').load("header.html");
$('#footer').load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
your content........
<div id="footer"></div>
</body>
</html>
What you can do is create a php file where you write the html code, and in the index.php call that same file. For exemple:
Tis is your index .php and the file footer.php is the other file with the html that you want.
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<?php include 'footer.php';?>
</body>
</html>
Or
you can also create an iframe, give it a specific size, in your html file and in the src, you can refer to the html file that you want
<iframe src="../../something.html"></iframe>
I realize this question was answered years ago, but I think it was not the best answer. I just learned a very simple way to include html files inside of other html files that is much better.
The trick is to name the your main .html file as a .shtml file. It is still an html file, but now the server will look inside for other files that you can include this way.
<!--#include file="Preamble.txt" -->
Your Preamble.txt can be another .html file that you want to be included in your main file.
This is called SSI (Server Side Includes). I guess it makes sense that the server needs to look inside the .html file it is sending to a client. I always assumed that it was always automatically done that way and that you didn't need to specify it. Turns out only certain file types are checked for included files by the server.
BTW, I noted the following cryptic answer, but only understood it after I learned about the SSI from other sources. Unfortunately, I got so much bad information in the past, I never realized there was an easy way to make web pages modular. I was doing it wrong for over 15 years.
"Server Side Includes" perhaps? – David Feb 28, 2019 at 11:40
there is a old tag that call <frameset> it used exacly for what you want. but this days it deprecated
<frameset cols="50%,50%">
<frame src="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset" />
<frame src="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frame" />
</frameset>
If you’re building a static website you can’t use SSI
