When I browse the source of websites, sometimes I see links like this:
...and sometimes I see links like this:
What is the difference between these two relative paths, if any, and why should I use one over the other?
The first is relative to the directory of the current resource. The second is relative to the root web directory.
Related
This question already has answers here:
Absolute vs Relative Links : Technical Difference
(2 answers)
Closed 4 years ago.
I have a question about absolute and relatives links as I am working on an assignment and seem to be a bit confused... what are the different situations that each type of link would be used in?
Thank you!
In short, relevant links look for files in that same folder structure. For example, if you had the following structure for your files:
root
/assets
/img
image.jpg
index.html
Then when finding an image to use on your image.html page, you could enter <img src="assets/img/image.jpg">. An absolute URL includes the full URL to that image, so it would be something like <img src="https://example.com/assets/img/image.jpg">.
Generally, using relative URLs is the easiest to manage things. If you use a content management system it will often use relative URLs.
Absolute URLs can be used everywhere - you'll need to use them if the URL isn't in your site structure.
Either one will get the same result if you have the image on your server, relative URLs are usually just faster to type. :)
#Danny Santoro does a good job explaining what relative and absolute links are. As for when to use them:
Use relative links whenever you're linking between pages on the same domain. For example, if you're working on https://www.google.com and you want to link to https://www.google.com/orange, you should use a relative link which would look like this: Go to Orange.
Use absolute links whenever you're linking between two pages on different domains. For example, if you're working on https://www.google.com and you want to link to https://www.facebook.com, use an absolute link: Go to Facebook.
As for why relative links are better if both the source and destination are on the same domain - let's say the site you're working has the domain oranges.com. Then you use absolute links - hard code every link on your site to be www.oranges.com/foo. Then later down the line, you want to switch your domain to be www.grapes.com. Now you have to go back and manually change every single link on your website to say www.grapes.com! Whereas if you'd just used relative links, you wouldn't have to change anything.
If you're linking to another domain, then you have no option but to use absolute links. Relative links only work when both the source and destination are on the same domain. So in this case you would use absolute links.
In my website, I have an html file inside of a folder, that is next to the index file. I want to add a link back to the index file.
For example, the URL for the index would be, example.com. The 2nd page is example.com/pages/example.html. How would i send the user back to the index page?
Assuming you have the following structure:
website.com/index.html
website.com/pages/example.html
You have three options -- two relative links, and one absolute link:
Relative to example.html:
Back to the index
Relative to the root (note the slash):
Back to the index
Absolute:
Back to the index
I'd recommend using a relative root, as your website URL may change in the future, so you don't really want to hardcode it.
As for which of the two relative approaches to use, relative to the root (/index.html) would be best in your base, as it will always take you back to the index -- you may move example.html to the same folder as index, or even a subfolder of pages, in which case the second relative link would need modification. If you have that link in multiple pages, that could prove annoying ;)
For further reading on relative and absolute URLs, I recommend checking out the Coffee Cup article.
Hope this helps! :)
I am developing a website on a web server which can be accessed by 2 URL: mywebsite.example.com or example.com/mywebsite. For example, when I access mywebsite.example.com/images/abc.jpg and example.com/mywebsite/images/abc.jpg, I get the same picture.
The problem is, I have many links inside my website, and I am not sure should I use an absolute or relative path.
From another question
Absolute vs relative URLs
I found someone suggesting using URL relative to root (like /images/abc.jpg), however when I access the website using example.com/mywebsite, every link just break.
For relative paths, I found it hard to manage since webpages are in different folders, but using the same template which contains some links. It means I have to manually set some links as ../ and some as ./.
I have also tried using <base> tag however it messes up with anchor. Even if I try to include the full path before the # symbol, some jQuery libraries does not function properly since they get the value inside the attribute href directly, but not extracting the part after #.
Would there be any better practice or suggestion?
I think you should use relative urls, and concentrate your searchs on how to use relative urls in templates, that would be resolved relatively to the final page.
I don't know the technology you are using for templating, but I see two common solutions :
declare a "relative path" variable in the template, and then override it in the different pages, with the new relative path. Use this relative path as a prefix for all urls
delegate urls construction to a service that would know the final page. Somethinkg like resolveUrl(..)
If I set a filepath for an image like src="images/anotherFolder/picture.jpg" on the start page of my website it works great. But if I then visit www.mywebsite.com/albums and use the same src, it doesn't work at all. And if check the image path given in Chrome I see that it's looking for an image with an URL which looks like this:
www.mywebsite.com/albums/images/anotherFolder/picture.jpg
instead of this:
www.mywebsite.com/images/anotherFolder/picture.jpg
So I thought that I would use a source that looked like this instead:
src="http://www.mywebsite.com/images/anotherFolder/edit.jpg" which works on both pages BUT then PHP functions such as is_file, is_readable, file_exists wont work properly.
So, what to do?
ADDED
I use a .htaccess file to rewrite the URL from http://www.mywebsite.com/albums?id=123 to http://www.mywebsite.com/albums/123
What you want is called relative paths.
If you want a relative path to the root of your site, you should start with a slash: /
src="/images/anotherFolder/picture.jpg"
And if you want relative path to the parent folder, you should start with two dots and a slash: ../
So if you are in www.mywebsite.com/albums,
src="../images/anotherFolder/picture.jpg"
and if you are in www.mywebsite.com/albums/aaa,
src="../../images/anotherFolder/picture.jpg"
Edit:
It seems that is_file doesn't work with relative paths from root, but it works with ../.
If you prefer relative paths from root, you can use
$_SERVER['DOCUMENT_ROOT']."/images/anotherFolder/picture.jpg"
Use src="./images/anotherFolder/edit.jpg"
I have a website, let's call it example.com. Within this site, I have some FAQs but the person that built the site saved the FAQ pages under a directory on the site named "FAQs".
As an example an FAQ page would be located at:
example.com/pages/en/faqs/faq-page1.html.
Note the pages/en/ directory. Ideally I would like all the pages to be saved under example.com/index.html etc but I can't change this.
Anyway, when I am on any of these FAQ pages, and I try to link back to say the home page index.html the navigation won't go to the page. So for example, when I am on:
example.com/pages/en/faqs/faq-page1.html
and I try to link back to the home page
example.com/pages/en/index.html (which is where the index page is saved) the nav won't work. Instead it will try to go to example.com/pages/en/faqs/index.html.
Now I am assuming this happens because I am in the "faq" directory, but how do I go back to the root directory when linking? The code for the link is simply Home. I could of course just put in the full link example.com/pages/en/index.html, which would solve this but is there another way around this?
You need to give a relative file path of Home
Alternately you can specify a link from the root of your site with
Home
.. and . have special meanings in file paths, .. means up one directory and . means current directory.
so Home is the same as Home
There are two type of paths: absolute and relative. This is basically the same for files in your hard disc and directories in a URL.
Absolute paths start with a leading slash. They always point to the same location, no matter where you use them:
/pages/en/faqs/faq-page1.html
Relative paths are the rest (all that do not start with slash). The location they point to depends on where you are using them
index.html is:
/pages/en/faqs/index.html if called from /pages/en/faqs/faq-page1.html
/pages/index.html if called from /pages/example.html
etc.
There are also two special directory names: . and ..:
. means "current directory"
.. means "parent directory"
You can use them to build relative paths:
../index.html is /pages/en/index.html if called from /pages/en/faqs/faq-page1.html
../../index.html is /pages/index.html if called from /pages/en/faqs/faq-page1.html
Once you're familiar with the terms, it's easy to understand what it's failing and how to fix it. You have two options:
Use absolute paths
Fix your relative paths
To go up a directory in a link, use ... This means "go up one directory", so your link will look something like this:
Home