How to properly reference local resources in HTML

Question

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   Take these examples  what is the difference between these reference paths     lt img src  myfile png    gt   no leading slash   lt img src   myfile png    gt   with leading slash   lt img src  folder myfile png    gt   no leading slash   in subfolder   lt img src   folder myfile png    gt   with leading slash   in sub folder   lt img src     folder myfile png    gt   with dots and a leading slash   in sub folder

User · Accepted Answer

A leading slash tells the browser to start at the root directory.
If you don't have the leading slash, you're referencing from the current directory.
If you add two dots before the leading slash, it means you're referencing the parent of the current directory.

Take the following folder structure

demo folder structure

notice:

the ROOT checkmark is green,
the second checkmark is orange,
the third checkmark is purple,
the forth checkmark is yellow

Now in the index.html.en file you'll want to put the following markup

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I'm purple because I'm referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

Now if you load up the index.html.en file located in the second subfolder
http://example.com/subfolder/subfolder/

This will be your output

enter image description here

[html] How to properly reference local resources in HTML?

Examples related to html

Examples related to src

Examples related to ref