title: Static website routing issue after extracting common html to separate file
body: <p>I need to develop a completely static website. There are many subpages for this site. As the header portion is common to all subpages, I place the header portion in header.html and use jquery to load it when each subpage completes loading. This header.html also loads an image from the images folder. There is no problem if I keep all my subpages in the root directory. </p>
  
  <p>However, as there are numerous subpages, I would like to rearrange them in subfolders. However, when loading a subpage, my header.html will not load the image unless i change the path to '../images/image.png'. Doing so will cause the same problem when loading the index.html after this path change.</p>
  
  <p>A simplified site structure and codes for each file is shown below. can anyone give me some advice on how to overcome this problem? </p>
  
  <p>Thanks alot in advance!</p>
  
  <p>My site structure:</p>
  
  <pre><code>common/
   header.html
  images/
   image.png
  js/
   jquery-1.11.1.min.js
  subpages/
   page1.html
  index.html
  </code></pre>
  
  <p>my codes for the pages:
  index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;A site&lt;/title&gt;
      &lt;script src="js/jquery-1.11.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  $('#header').load('common/header.html')
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>header.html</p>
  
  <pre><code>    &lt;div id='logo'&gt;&lt;img src='images/image.png' alt="image"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;h1&gt; This is header &lt;/h1&gt;
      &lt;div id='subpage'&gt;&lt;a href='subpages/page1.html'&gt;Page 1&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>page1.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;This is a subpage&lt;/title&gt;
      &lt;script src="../js/jquery-1.11.1.min.js" type="text/javascript"&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;h1&gt; This is a subpage &lt;/h1&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  $('#header').load('../common/header.html')
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>