TechelopmentBy "embedding html files" we mean the possibility of being able to include an html file in another html file, a sort of "import".
Imagine having a site where the header and footer are always the same on all pages. To avoid duplicating the code by repeating the html structure of the header and footer on each page, you can use a technique that allows you to define an html file with only the structure that interests us and then include it in the final pages.
For example, we could define the header.html and footer.html files and then include those files in home.html, contact.html, about.html, and so on. This way we won't have to duplicate the header and footer html code on every page.
🔗 Do you like Techelopment? Check out the site for all the details!
How to nest html files
We have understood what nesting html files means and what the advantages are, let's now see how it is possible to implement this technique.
Unfortunately, HTML does not natively support this technique. HTML Imports was a Web Components specification that allowed you to include HTML documents in other HTML documents, but it is no longer supported by modern browsers.
Embedding, injecting, importing or including files (they are all synonyms) with server side scripting is very easy, with PHP for example, just one instruction is enough:
<html>
<head>Homepage</head>
<body>
<?php include 'header.php';?>
<h1>Welcome to my home page!</h1>
<?php include 'footer.php';?>
</body>
</html>
But what if we don't want to or, more likely, can't use server side scripting, what could we do?
A first idea could be to use JavaScript with a technique similar to the one shown below:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- html of header will be included here by header.js -->
<script src="header.js" type="text/javascript" defer></script>
</body>
<html>
/* header.js */
const header = `
<header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>`
const template = document.createElement('template');
template.innerHTML = header;
document.body.appendChild( template.content );
Unfortunately, using this approach would have negative impacts on SEO because the html page would not be analyzed in its entirety (Google does not like html injected via JavaScript 😞). If you are not concerned about SEO, you can find an in-depth study of this technique in this article Reusable HTML Components - How to Reuse a Header and Footer on a Website.
At this point we could think of using <iframe> or <object> but these are obsolete techniques that do not adequately respond to the needs of the Web (first reason among all, responsive compatibility).
How could we do then?
Server Side Includes
Perhaps not everyone knows that Apache has a feature called Server Side Includes (hereafter SSI) that allows you to add dynamic content to HTML documents.
You can find a guide on how to quickly install Apache on Windows in the article Installing Apache on Windows in a Few Simple Steps
SSI provides directives that are inserted into HTML pages and evaluated on the server as the pages are served. It allows you to add dynamically generated content to an existing HTML page, without having to serve the entire page using server-side scripting technologies (e.g. PHP).
How to use SSI
Let's see how to configure and use SSI.
SSI - Configuration
Make sure that Apache has the modules shown in the previous image:
mod_includemod_cgimod_expires
Let's open the .htaccess or httpd.conf file of our Apache installation and add the following directives:
Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
-
Options +Includesallows you to enable SSI -
AddTypeandAddOutputFiltertell Apache which files to parse. In this example, parsed files must have the.shtmlextension
In case we do not want to change the extension of our HTML pages, there is another way to let Apache know which pages to perform SSI on. The alternative is to use XBitHack:
XBitHack on
XBitHack tells Apache to scan files for SSI directives if they have the execute bit set. So, to add SSI directives to an existing page, instead of having to change the file extension, you would simply make the file executable using chmod.
chmod +x pagename.html
Remember: to verify that changes to Apache configuration files have not introduced errors, you can use the command
httpd -t
SSI - Usage
Now that everything is configured, we are ready to see some uses for the SSI directives. Let's start with a simple test to make sure SSI is working, display today's date:
<!--#echo var="DATE_LOCAL" -->
Output
Friday, 01-Nov-2024 17:20:06 W. Europe Standard Time
Perfect it works 😀
⭐ It's finally time to include html files via SSI, here's how to do it:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--#include virtual="/header.html" -->
</body>
<html>
The include function determines which file to include with the file attribute or the virtual attribute. The file attribute specifies the path to the file to include, relative to the current directory. This means that it cannot be an absolute path (starting with /), nor can it contain ../. The virtual attribute is probably more useful and allows you to specify a path relative to the served document. It can start with /, but must be on the same server as the served file, for example:
<!--#include virtual="/path/to/file.html" -->
Follow me #techelopment
Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment
