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"> <head> <meta charset = "UTF-8"> <title>csSSI.shtml</title> <link rel = "stylesheet" type = "text/css" href = "csStd.css" /> </head> <body> <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 → </body> </html>
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
