title: How do we cache HTML "fragments"?
body: <p>I have a page which looks like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;Content 1000 chars&lt;/div&gt;
      &lt;div&gt;Content 1000 chars&lt;/div&gt;
      &lt;div&gt;Content 1000 chars&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When a client downloads the page, basically he's downloading 3100 characters. If he visits the page again and the contents of the first div changes, he will have to redownload the entire page again (3100 characters).</p>
  
  <p>Now basically I was wondering are we able to cache HTML fragments like the way we do with images?</p>
  
  <p>So I was thinking is there somewhere to get this effect:</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div src="page1.html"&gt;&lt;/div&gt;
      &lt;div src="page2.html"&gt;&lt;/div&gt;
      &lt;div src="page3.html"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So if I were to change the contents of page1.html, the browser would be able to know that only page1.html was changed since the last visit, and downloads 1000 characters instead of the entire page (3100) characters. Essentially this behavior is identical to what is happening now with images:</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;img src="img1.gif"&gt;
      &lt;img src="img2.gif"&gt;
      &lt;img src="img3.gif"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>whereby changing <code>img1.gif</code> will invoke the browser to redownload only <code>img1.gif</code> (assuming all the other files have not been edited)</p>
  
  <p>To be clear, I'm not looking for an AJAX solution. I need a solution that works without javascript (as with all the above examples). I'm also not particularly in favor of the frames solution, However I would accept that as answer if there are simply no other alternatives / quirks / <em>hacks</em></p>