Absolute and Relative links

Question

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!

Answer 1

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. :)

Answer 2

@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: <a href="orange">Go to Orange</a>.
• 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: <a href="https://www.facebook.com">Go to Facebook</a>.

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.