Please guys what is the difference between an absolute and a relative link in HTML?

Question

This has got me wondering, how can one tell the difference between an absolute and a relative link please anyone with a better understanding

Answer 1

'absolute" or 'relative' link is related to 'absolute' or 'relative' urls used in links...
Urls are adresses of ressources on network ( could be the desktop file system ).

'absolute' ones are written completly, meaning specifying a full url with the protocole used ( usually 'http:' for web, 'file:' for desktop file system, and so on... ) and the complete path to access the ressouce "from anywhere" ( starting with sub/domain name and extention ) to locate the root file system of your web hosting.

'relative', contrarly, are not intended to be access "from anywhere", but from a specific already known location, the one of the actual "running" code... So, if you have loaded an html page at http://mydomain.net/myfolder/mypage.html, then inside of it a relative path/url/link will be calculated relatively to the folder ( directory ) of the source ( which is http://mydomain.net/myfolder/ ):

<img src="images/mypicture.jpg> <!-- equivalent to src="http://mydomain.net/myfolder/images/picture.jpg" -->
<a href="../index.html">go to index</a> <!-- equivalent to src="http://mydomain.net/index.html" -->

Answer 2

An absolute URL is one with a domain name (such as, https://www.google.com). We usually use an absolute URL to link to a different website from the one you are working on.

A relative url on the other hand is just a path to either a file within the directory that contains your html file(for example; style.css, which links to to css file),
or a folder on your local computer,
or even a section on your page ( for example; href="#catalogue") would link a user on your page directly to the catalogue section (#catalogue being the given ID)

Answer 3

absolute = <img src="http://www.example.com/image/example.jpg" />

relative (only works while browsing the site from the home www or public_html folder, usually main index page) = <img src="image/example.jpg" />

easier to code and read, just make sure your link is on the page that can follow the relative path (if in music folder they would just attempted to load www.example.com/music/image/example.jpg most likely not your intent

Answer 4

yea i read that first too but since it's css reread and saw 'link' lol

Answer 5

oh sorry I have read absolute/relative and I thought you were talking absolute css positions, my mistake.

Answer 6

that's what I wanna know...
can anyone tell me?

Answer 7

Absolute is a type of position, if you change the x, y of an element having an absolute position, it will move depending on the whole website page.
Relative is depending on its DOM parents position.

Answer 8

@Geoffrey L please I didn't get your explanation. Make it simpler

Answer 9

Thanks y'all... I really appreciate your help @William La Flamme