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.
Related
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(..)
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.
This is a newbie question, I know, but I couldn't find clear answer.
My web root looks like this:
/index.html
/img
I set up subdomain img.my-domain.com, it points to /img folder
Now, in my index.html I call image located in subdomain i.e. folder img
I can do it using relative and absolute path, both are working:
src="/img/image.jpg"
src="http://img.my-domain.com/image.jpg"
My question is: is there any difference? In the context of parallel downloads concept, is the image gonna be perceived by browser as coming from subdomain in both cases?
I have a lot of images and want to serve them from 2 subdomains. However I develop locally and when the website will go online, I would have to change image links from relative to absolute in case absolute path is required.
Thanks
src="/img/image.jpg"
Will send cookies for www.my-domain.com. Won't appear as a separate domain.
src="http://img.my-domain.com/image.jpg"
Will have separate cookies. Many websites do this to improve performance.
You should real use the relative protocol so if you need SSL, you won't get warnings. src="//img.my-domain.com/image.jpg"
no there isn't but the relative path is the common way.
I have a site with static HTML pages in the home directory. These HTML pages use relative paths to refer to images, css, and links i.e.
<img src="images/myimg.gif">
and
Contact Us
I also have a monolithic script whose URL is, i.e. http://mysite.com/myScript which uses "extra path info" to select functions... i.e. http://mysite.com/myScript/products shows a list of products. So in HTML generated from the script I need to refer to images, css and links like this:
<img src="../images/myimg.gif">
and
Contact Us
The problem is now I want to start moving common HTML into include files, (e.g. common header and footer), but the fact that the script and the static HTML refer to relative resources in different ways is complicating matters.
I don't want to use absolute paths because that messes up my colleague's work when she tries to work on the pages in DramWeaver, and it also makes the site less flexible.
What's the best way to solve this issue? One idea I had was to use URL rewriting in Apache to allow the URL to http://mysite.com/products to really use http://mysite.com/myScript/products but I don't have experience with URL rewriting so I don't know how easy that would be. Another idea I had was to use the META BASE attribute in HTML but I don't like the fact that I would have to hard-code that into every HTML page, and it would have to have the full URL hard-coded (e.g. http://mysite.com/) into each one. Any advice?
Can't you refer to your images with a slash at the beginning so all files linked to are from the root, no matter how deep you are in the directory structure you are? E.g:
<img src="/images/myimg.gif" />
EDIT:
You could use $_SERVER to get the path then use substr_count to count the number of slashes in the path. Add as many ../'s as you need based on that number. Would that work for you?
I got a question and although I could find related information, I'm if it was exactly about what I'm wondering about.
The thing is, I got a site on http://localhost/site.
Now, when I create a link, let's say, <a href="/posts">, it links to http://localhost/posts instead of http://localhost/site/posts.
It works fine if I remove the slash (<a href="posts">), that would be the closest and maybe the easiest solution, but I'd like to know why the links ignore the folder where the file is at?
And I also would like to know if this can be fixed with .htaccess or something.
I've read that a link that begins with / makes it "absolute". So a link beginning with / is only intended to be used to link directly to the root, or to be used by sites stored at the root (in this case it wouldn't make much sense?) ?
The leading '/' at the start of the URL informs the web browser that the path given is absolute (with respect to the web server root), i.e. if you link to /posts then you know that the resulting link will be to http://www.mysite.com/posts.
If you don't supply the leading '/' (and you don't give a complete url like http://www.mysite.com/posts) then usually the url is relative, and any page given will be relatvie to the page currently being viewed.
For example:
page being viewed link url target page
------------------------------------------------------------------------------
www.mysite.com/site link.html www.mysite.com/site/link.html
www.mysite.com/site ../link.html www.mysite.com/link.html
www.mysite.com/some/other/page link.html www.mysite.com/some/other/page/link.html
www.mysite.com/some/other/page ../../../link.html www.mysite.com/link.html
The decision on whether to use absolute or relative links is entirely up to you - the advantage of relative links is that if your site moves, links between pages on your site will still work correctly (for example if your site moves to www.mysite.com/otherpath, then any absolute links such www.mysite.com/originalpath/home will no longer work.
You should see the following site for a more complete explanation of relative urls:
Relative URLs (WebReference.com)
Your site root is localhost although you assume that site is your site root. When you use / it is relative to localhost as it is an absolute link.
Try doing it < a href="../posts" >
./ Means base directory, or home
../ Means one directory up