This tutorial will show you how to set up and use Apache Server-Side Includes (SSI) on your website. Server-Side Includes can be used to add dynamic content to web pages, reuse HTML code, and more.
As the name "Server-Side Includes" implies, content is generated on the server, whereas client-side technologies (such as JavaScript) generate content on users' computers.
Enabling Server-Side Includes
Server-Side Includes are enabled by default on our shared servers for files with the .shtml extension. However, you may want to use Server-Side Includes with other types of files, such as.html or .htm files.
To do this, create an .htaccess file in your account's document root (public_html) directory, or in the subdirectory where you want to use Server-Side Includes. Add the following text to the .htaccess file:
Options +Includes AddType text/html .html AddOutputFilter INCLUDES .html AddType text/html .htm AddOutputFilter INCLUDES .htm
These directives demonstrate how to enable Server-Side Includes for files that have a .html or .htm extension, but you can easily add other file extension types as well.
Using Server-Side Includes
Apache Server-Side Includes can be used in a variety of contexts. The following sections are a brief introduction to some possibilities using SSI.
Displaying a page modification timestamp
One of the most common visible uses of SSI is displaying when a page was last modified. The following HTML snippet demonstrates one way to do this:
<p><em>Page last modified on <!--#echo var="LAST_MODIFIED" --></em></p>
SSI statements, as you can see, begin with!—# and end with —>. The # character informs Apache that this is a Server-Side Include rather than a normal HTML remark. The following is the output of the code snippet:
Another popular application of SSI is the reuse of HTML (such as a header or footer) across many pages. For instance, you may have HTML code for a footer that you would like to include on every page of your website. You could manually copy this HTML to each page, but what if you want to change the footer? You'd have to edit each file separately.
SSI provides an easy solution to this problem. Continuing our example, you can create a footer.html page that contains the footer code, and then reference the footer.html file in your web site pages by using the following HTML snippet:
<!--#include virtual="footer.html" -->
Now the footer code is centralized in one location (the footer.html file), and all you have to do is add an SSI include directive to each page. When you modify code in the footer.html file, every page that includes it is updated automatically.
Using conditional expressions
Conditional expressions in SSI can be used to offer simple flow control to your web pages. These conditional expressions function in the same way as conditional statements do in other programming languages. For instance, the following HTML snippet shows how to display different text depending on the current date:
<!--#if expr="$DATE_LOCAL = /^Saturday/ || $DATE_LOCAL = /^Sunday/" --> <p>It's the weekend!</p> <!--#else --> <p>It's not the weekend…</p> <!--#endif -->
