title: Reuse elements of HTML
body: <p>I'm writing a static web site that uses JQuery to make some AJAX calls to a RESTful API and populate the page with data.</p>
  
  <p>The site functions correctly (and quickly), everything is good.</p>
  
  <p>As I extend the site and add additional pages, I'm noticing that I'm duplicating certain regions on every page.</p>
  
  <p>For instance, each page shares a common <code>header</code> element.</p>
  
  <pre><code>&lt;header&gt;...Some non-trivial content...&lt;/header&gt;
  </code></pre>
  
  <p>Rather than repeat this definition on each page is there some mechanism, by which, I can define this section once and include it in each document.</p>
  
  <p>Remember that the pages must be served statically but any standard complaint browser functionality can be utilised.</p>
  
  <p>Is there a good way to do this, and what is it or, will I have to abandon <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="noreferrer">DRY principles</a> for this aspect of my client side code?</p>