How to Manage HTML5 and CSS3 Content with Server Side Includes (SSIs)

By Andy Harris

HTML5 and CSS3 web developers have long used the simple SSI (Server Side Include) trick as a quick and easy way to manage content. It involves breaking the code into smaller code segments and a framework that can be copied.


Even if you view the source code in the browser, you don’t find anything unusual about the page.

However, if you look at the code in a text editor, you find some interesting discoveries:

<!DOCTYPE html>
<html lang = "en-US">
 <meta charset = "UTF-8">
 <link rel = "stylesheet"
   type = "text/css"
   href = "csStd.css" />
 <div id = "all">
  <!-- This div centers a fixed-width layout →
  <div id = "heading">
  <!--#include virtual = "head.html" →
  </div><!-- end heading div →
  <div id = "menu">
  <!--#include virtual = "menu.html" →
  </div> <!-- end menu div →
  <div class = "content">
  <!--#include virtual = "story1.html" →
  </div> <!-- end content div →
  <div class = "content">
  <!--#include virtual = "story2.html" →
  </div> <!-- end content div →
  <div id = "footer">
  <!--#include virtual = "footer.html" →
  </div> <!-- end footer div →
 </div> <!-- end all div →

Some interesting things are happening in this code snippet:

  • The page has no content! All the actual content are gone. This page, which contains only structural information, is the heart of any kind of CSS — the structure is divorced from the content.

  • A funky new tag is in place of the content. In each place that you expect to see text, you see an <!–#include → directive, instead. This special instruction tells the server to go find the specified file and put it here.

  • The filename is unusual. The server doesn’t normally look for include tags (because most pages don’t have them). Typically, you have to save the file with the special extension .shtml to request that the server look for include directives and perform them. (It’s possible to use special server configurations to allow SSI with normal .html extensions.)

  • Servers don’t always allow SSI technologies. Not every server is configured for Server Side Includes. You may have to check with your server administrator to make this work.

The nice thing about Server Side Includes is the way that it separates the content from the structure. For example, look at the code for the first content block:

  <!--#include virtual = "story1.html" →

This code notifies the server to look for the file story1.html in the current directory and place the contents of the file there. The file is a vastly simplified HTML fragment:

<h2>Book I - Creating the HTML Foundation</h2>
 <li>Sound HTML Foundations</li>
 <li>It's All About Validation</li>
 <li>Choosing your Tools</li>
 <li>Managing Information with Lists and Tables</li>
 <li>Making Connections with Links</li>
 <li>Adding Images</li>
 <li>Creating Forms</li>

This approach makes it very easy to modify the page. If you want a new story, you simply make a new file, story1.html, and put it in the directory. Writing a program to do this automatically is easy.

Like PHP code, SSI code doesn’t work if you simply open the file in the browser or drag the file to the window. SSI requires active participation from the server; to run an SSI page on your machine, therefore, you need to use localhost, as you do for PHP code.

If you view the source code of csSSI.shtml you won’t see the include lines; they’ll be replaced with the included HTML snippets.