title: How to properly reference local resources in HTML?
body: <p>As it turns out, referencing local resources can be a rub point for some. I'm looking for a canonical answer to local resource referencing, and what they mean.</p>
  
  <p>Take these examples, what is the difference between these reference paths?</p>
  
  <ul>
  <li><code>&lt;img src="myfile.png" /&gt;</code> (no leading slash)</li>
  <li><code>&lt;img src="/myfile.png" /&gt;</code> (with leading slash)</li>
  <li><code>&lt;img src="folder/myfile.png" /&gt;</code> (no leading slash / in subfolder)</li>
  <li><code>&lt;img src="/folder/myfile.png" /&gt;</code> (with leading slash / in sub folder)</li>
  <li><code>&lt;img src="../folder/myfile.png" /&gt;</code> (with dots and a leading slash / in sub folder)</li>
  </ul>