How to use Server-Side Includes (SSI)

This article describes how to configure and use Apache Server-Side Includes (SSI) on your web site. You can use Server-Side Includes 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

On our shared servers, Server-Side Includes are enabled by default for files that have a .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

You can use Apache Server-Side Includes in a variety of scenarios. The following sections are a brief introduction to some possibilities using SSI. For a detailed discussion of SSI capabilities, please see the More Information section below.

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>

As you can see, SSI statements begin with <!—# and end with —>. The # character signals to Apache that this is a Server-Side Include, and not a regular HTML comment. The code snippet generates output similar to the following:

Page last modified on Thursday, 20-Feb-2014 12:37:34 EST

Reusing HTML

Another common use of SSI is reusing HTML (such as for a header or footer) in multiple pages. For example, you may have HTML code for a footer that you want to include in every page on your web site. You could copy this HTML manually to each page, but what happens when you want to make a change to the footer? You would have to edit each file individually.

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

You can use conditional expressions in SSI to add basic flow control to your web pages. These conditional expressions work similarly to conditional statements in other programming languages. For example, the following HTML snippet demonstrates how to display different text based 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 -->

If the $DATE_LOCAL variable’s value begins with Saturday or Sunday, then the page displays It’s the weekend! Otherwise, the page displays It’s not the weekend…