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
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.
This seems like a simple question but it's baffling me. Let's say my domain is:
bar.com and my subdomain is foo.bar.com.
If I'm on foo.bar.com/1/2 and I go back a directory through a link with a relative path (href="../") it will take me to foo.bar.com, not foo.bar.com/1 as I'd expect it to. Why is this? How do I get to foo.bar.com/1 with a relative path?
Side question: If foo.bar.com is masking another directory (let's say bar.com/foo, and I go to href="/", will that take me to the root of the entire domain (bar.com) or just to the root of the subdomain (foo.bar.com)?
If the current page is http://foo.bar.com/1/2, browser thinks 2 is a document under the directory 1. So if you have ../, it goes to its parent directory, which is the root directory. If you want to link to http://foo.bar.com/1/, you can use href=./.
I don't quite understand your side question. Generally if the URL displayed in browser is bar.com/foo, then href="/" takes users to bar.com/; if the URL displayed in browser is foo.bar.com/, then href="/" takes users to foo.bar.com/
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 code my website, on my local computer i can use
blablabla.
However, I also can see this type of thing on other places as
blablabla.
I am not sure what I will need when my site goes live. If I try to do this on my local computer, it doesn't understand it. My question is, if I post my site up like this, will it work?
Ok, if I have all of the files of my site in the root directory that the main index.html file is located in, will it work when it is being hosted?
If you do not use a slash, the link will point to index.html in the same folder as the page the link is on.
For example, if you have a link to index.html on the page www.example.com/page2.html then the link will take you to www.example.com/index.html. If you include a slash, it will do the same thing.
However, if the link is in a page in a subfolder, like www.example.com/projects/page2.html, then the first link will take you to www.example.com/projects/index.html while the second link will still take you to www.example.com/index.html.
The slash denotes the "web root."
Note that these are still considered "relative" links: they refer to a resource on the same server, regardless of the server's name. If your domain name changes or you upload it to another server, relative links will still work provided they have the same folder structure.
If my path is "http://www.example.com/folder1/folder2/" how can I return to "http://www.example.com/folder1/"
I've tried
Back
Which get me back to "http://www.example.com/" and not the previous folder. Any clue on how to do it ?
EDIT
I have a
<base href="http://www.example.com/" />
in the head, could it be because it try to go down 1 folder from that base ?
Back
Should work if you drop the trailing slash. Don't really know why it wouldn't work with it but if it's not working, try that...
EDIT Just tested and both versions worked for me in IE8 - what browser are you using to test it?
Another Edit
If you use a <base> tag, all relative hrefs will be relative the href attribute specified as the <base> (thats the point of it). If your base is the root of the site, like http://www.example.com/, links that try to step down a directory won't make any sense, since there's nowhere lower to go, and they will just point to the root directory. However, if the base is the root of the site, there's probably no point in having one at all, since this is, effectively, the default - it would only make a difference if you were working from a higher level directory.
If the base is not the root, but somewhere higher (like http://www.example.com/somedirectory/) there is a point in the base declaration, but you have to make a decision - something would have to be specified absolutely. So if you have done it because you want to refer to all your images as just file.jpg instead of /somedirectory/file.jpg, you either need to change your image references to the absolute /somedirectory/file.jpg, or have your 'navigation links' like the one shown in the question specified absolutely. You can't do both.
I would say (although I don't know much about the rest of your site and how it was built) that your best bet is to scrap the <base> in order to allow for relative navigation links, but the choice is yours...