HTML Include File (SSI or Client)

HTML Server Side Includes (SSI) or Include File on Client Side.

Method 1 - parse PHP in HTML files for server-side include

The best way to implement an include file for HTML is to modify the .htaccess file so the server will parse PHP, then just add in a bit of PHP to include the file you want in your html file.

.htaccess file

# this lets html files act as php files
AddHandler application/x-httpd-lsphp .html

HTML file

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML page with CSS file included using PHP</title>
<!-- CSS file to load -->
<style>
<?= file_get_contents("css.css"); ?>
</style>

 This loads the css file and includes it into the html file. In this example the css file was included, but this can be done with a header, or footer, or any other content that doesn't change from page to page.

Example 1:

For the example, right-click this page and view-contents. You will see all the css included between the <style></style> tags. You won't see the PHP file because the server parses the PHP before it sends the file to the browser. 


Method 2 - server side include in an HTML file

Include the following line in your .htaccess file to tell the server allow server side includes in html files.

Note you don't need both of these methods, use one or the other.

.htaccess file

# this tells the server to allow server side includes in html files
AddHandler server-parsed .html

HTML file

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML page with CSS file included using PHP</title>
<!-- CSS file to load -->
<style>
<!--#include virtual="css.css"-->
</style>

 This will also load the css into the page. Again, you can include header, footer, menu or any other content that repeats page to page.


Method 3 - client side include in an html file

This method loads content into the browser using Javascript. If you don't have access to your .htaccess file, this method provides a reasonable compromise to include files or sections in your HTML.

Add this Javascript function to the head, then call the function where you want your file to be included.

HTML file with Javascript function

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML page with client side include content</title>

<script>
// parameters are the filename of the file to include
// and the id of the element where the contents will be inserted.
function include(filename, id) {
    fetch(filename).then((resp) => resp.text()).then(function(data) {
        document.getElementById(id).innerHTML = data;
    });
}
</script>
</head>

<body>
<!-- the content will be inserted here -->
<div id="txt">
    ​<script>include("text.txt", "txt");​</script>
</div>

<!-- continue the html file -->

The div with id="txt" will have the contents of filename "text.txt" inserted into it. You can format html markup in the text file and insert it into the div, or even insert large sections of the page with formatted html markup.

However, it is good practice to insert client side content under the fold. If you use the client-side javascript method to insert above the fold the user will see the jump as the new content is inserted. So, it's better for user experience to insert content using Method 3, under the fold, which is below the view of the screen when the page initially loads.

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use