Html relative paths using period

Question

I'm confused as to when the following are used and what they mean, for example in the src attribute of an img tag.

I know / means 'current directory' and ../ means 'up one directory'

.   Current Directory?  <a href="." />  
./  Current Directory   <img src="./image.png" />  
/   Root directory      <img src="/image.png" />  
../ Up one directory    <img src="../image.png" />  

What is the difference between ./image.png and /image.png

Updated: / means root directory of the site

Answer 1

/ means starting from the root directory. Whereas ./ is the current directory, though I'm not sure there's any need for it (unless you're planning on appending to a PATH in Linux systems... happy to be wrong about that one).

Answer 2

./image.png will grab image.png relative to your current location. Calling ./image.png on domain.tld/site/page.html will look for the image at domain.tld/site/image.png

/image.png will look for the image in the root of your site. domain.tld/image.png

---

You could also use things like ../images/image.png. If this was used on domain.tld/site/page.html, the browser would load the image from domain.tld/images/image.png

Answer 3

The / means the root directory. Use . For the current directory.