Ignorance Is Bliss

Chaining Master Pages together is useful but only benefits the visitor when we give them something to see. As we don't really expect our visitors to access Master Pages directly and glean anything useful from them, we must add resource documents to the end of the chain. This is fortunately extremely easy to do because we have already learned how to do this!

In continuing with our contrived tutorial, we will add the following HTML5 file to our fictional site:

/section1.html

<!DOCTYPE html>
<html>
   <head>
      <title>One</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="SSI-Template" content="section-master.html">
      <meta name="description" content="This is a section-specific page">
      <meta name="keywords" content="SECTION,PAGE,SPECIFIC,KEYWORDS,HERE">
   </head>
   <body>
      <div title="SSI-Filler" id="section-content-1">
         Content here gains the benefit of all chained Master Pages!
      </div>
   </body>
</html>

This resource document needs only be concerned with its immediate Master Page. Once it has content that is wrapped in an appropriate SSI-Filler directive DIV and a properly formed SSI-Template directive META, the fact that its Master Page happens to chain into other Master Pages is of no consequence to this particular file.

Results

When visitors access this page at http://your-site/section1.html, they should see something very much like:

Figure 9: Rendered Chained Resource Document

Not exactly pretty, but this is an ultra-simplified tutorial. What is important here is that so little HTML was written into this resource document to gain so much content, thanks to HTML Master Pages and this chained Master Page setup. If you have been following along, the resulting source code for this output shouldn't contain any surprises:

<!DOCTYPE html>
<html>
   <head>
      <title>One - Sections - Your Site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="description" content="This is a section-specific page">
      <link rel="stylesheet" href="style-master.css">
      <link rel="stylesheet" href="section-style.css">
      <meta name="keywords" content="SECTION,PAGE,SPECIFIC,KEYWORDS,HERE">
   </head>
   <body>
      <header>
         <h1>On Every Page</h1>
         <p>This content will appear on every page that points to this
            file as its Master Page.</p>
      </header>
      <article>
         <section>
            <header>
               <h2>Something About Every Section</h2>
               <p>Something relevant to every Section</p>
            </header>
            <article>
               Content here gains the benefit of all chained Master Pages!
            </article>
         </section>
      </article>
      <footer>
         &copy; Your copyright notice here
         <address>
            Your name,<br>
            when this page was last updated, and<br>
            how to contact you here.
         </address>
      </footer>
   </body>
</html>

Figure 10: Resulting HTML, Resource Document with Chained Master Pages

Analysis

A quick recap:

The HEAD tag of our resource document (section1.html) was merged with that of its Master Page (section-master.html), which was then merged with the HEAD tag of its immediate Master Page (site-master.html).
The SSI-Filler DIV tags in our resource document (section1.html) fully replaced the matching SSI-Container DIV tags in the resource document's Master Page (section-master.html).
The SSI-Container DIVs that were replaced in this intermediary Master Page (section-master.html) where themselves wrapped in SSI-Filler DIV tags that -- now carrying content from our resource document -- fully replaced matching SSI-Container DIV tags in that Master Page's immediate Master Page (site-master.html).
The result is the final merged document as seen in Figure 9 and Figure 10, wherein our merge chain has fully resolved, adding rich content to an otherwise plain document.