Differences between the ways resources are referenced in href/src

Sometimes small items takes too much of time. I always face issues when it comes to providing correct location of the resource so this post is an effort to minimize such issues.

Let’s understand differences in which resources are referenced. Consider the index.html has script in below ways:

    <script src="myscripts.js"> 
  1. Browser will look in the current directly of the file where this script tag is mentioned. So if you move the index.html into any other directly then browser will not be able to reference the myscript.js
  2. <script src="./myscripts.js"></script>
  3. This will be exactly same as example in #1. This is only different way of mentioning that refer the file from the current directory.
  4. <script src="/myscripts.js"></script>
  5. Here browser will look into the root directory of the website, no matter where the index.html having this tag is present.
  6. <script src="../myscripts.js"></script>
  7. Here browser will go to the parent directory of the index.html and then will look for the myscript.js

This blog post is small but thought of sharing, whenever I used to face issue then I used to try different formats and some or the other used to work. Never paid close attention but if you have so many file references and then your try outs permutation and combination increases. Having clear understanding of how references work would save some hassles.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: