../courses.php
The Browser's Role
BROWSER
90
Following Links And Navigation
Why the exact same link can request two different addresses depending on where it sits.
A link with the exact same href, written as just images/logo.png, works correctly on one page and points to a missing file on a different page, even though both pages sit on the same website and neither page has any typo anywhere. The href text is identical, character for character, in both places. Why would the identical link text resolve to two different addresses?
A relative address such as images/logo.png is resolved by the browser relative to the address of the page the link actually sits on, not relative to the website's root or to any fixed starting point. The same relative text, placed on two pages at different folder depths, resolves to two genuinely different final addresses, because each one is built starting from a different page's own location.
A link's href can be written as an absolute address, including the full scheme and host, or as a relative address, missing those parts entirely and depending on the current page's own address to fill them in.
A relative address is resolved starting from the address of the page the link sits on, not from the website's home page and not from any other fixed reference point.
Clicking a link is, underneath, the exact same action as typing an address directly and pressing enter. The browser sends a new request for whatever address the link resolves to, with no meaningful difference between the two.
A link's target attribute can open the resulting page in a new tab instead of the current one, which changes where the result is displayed, but nothing about the actual request the browser sends.
Navigating using the browser's own back and forward buttons does not necessarily send a new request to the server at all. Depending on the browser, it can instead show a previously stored version of the page from its own local history.
The same relative link, resolved from two different pages
Page at /products/shoes/index.php:
<img src="images/logo.png">
resolves to: /products/shoes/images/logo.png
Page at /blog/posts/shoes/index.php:
<img src="images/logo.png">
resolves to: /blog/posts/shoes/images/logo.png
Both pages use the exact same characters, images/logo.png, with nothing different between them at all. The difference in the final result comes entirely from where each page itself sits, not from anything written in the tag.
The browser takes the current page's own address, drops its final segment, and appends the relative address onto what remains, which is why each page's own location directly shapes the final result.
A logo file that genuinely exists at the first resolved address will load correctly on the first page and fail to load on the second, unless an identical copy also happens to exist at the second page's expected location.
Writing the same reference as an absolute path starting with a single leading slash, such as /images/logo.png, always resolves to the exact same address regardless of which page it appears on, since a leading slash anchors it to the site's root instead of to the current page's own location.
A small site with every page at the same folder depth may never notice this distinction at all. A larger site with pages nested at different depths is exactly where identical-looking relative references silently resolve to different final addresses depending on where they are used.
A relative address has no fixed meaning on its own, only in context
A relative reference is not, by itself, a complete description of any one location. Its actual meaning depends entirely on which page it appears on, which is why the exact same text can be entirely correct in one place and broken in another.
Copying a working link onto a different page can silently break it
A link or image reference that works perfectly on one page can fail the moment the exact same markup is copied onto a page at a different folder depth, with no warning or error pointing at the actual cause, since the copied text itself never changed at all.
A leading slash anchors a path to the site's root, removing this entire problem
Writing a path with a leading slash resolves to the same final address no matter which page it sits on, because a leading slash tells the browser to start from the site's root rather than from the current page's own location.
Clicking a link and typing an address produce the exact same kind of request
There is no special category of request reserved only for clicked links. Once a relative href is resolved to its final address, the browser sends exactly the same kind of request it would send if that final address had been typed directly into the address bar.
The back button does not always cause a new request
Many browsers keep a local copy of recently visited pages and can show that stored copy again when the back button is pressed, without sending any new request to the server at all, which is why a page shown after pressing back does not always reflect changes the server may have made in the meantime.
A relative reference that breaks depending on page depth
<img src="images/logo.png">
A root-anchored reference that resolves identically everywhere
<img src="/images/logo.png">
When an AI tool produces markup, three things are worth checking. First, does it use a root-anchored path, starting with a leading slash, for any reference meant to work identically across pages at different folder depths. Second, does the explanation correctly describe a relative address as being resolved against the current page's own location, not the site's home page. Third, does it avoid assuming the back button always sends a fresh request to the server.
Create two pages at different folder depths, both referencing the exact same relative image path, and confirm only one of them actually loads the image correctly.
Change the broken reference to a root-anchored path instead, and confirm it now resolves correctly on both pages.
Click a link, then use the back button, and use your browser's developer tools to check whether a new request was actually sent to the server or not.
Write an absolute link, including the full scheme and host, and explain why its resolved address never depends on which page it sits on.
Find a real, multi-level website and identify, by inspecting a link's actual resolved address, whether it was written as relative or root-anchored.
Copying a relative reference from one page onto a different page at a different folder depth without checking whether it still resolves correctly there.
Assuming a relative address has some fixed, absolute meaning on its own, independent of which page it appears on.
Forgetting that a leading slash changes a path's starting point entirely, from the current page's location to the site's root.
Assuming every press of the back button sends a fresh request to the server, when many browsers instead show a stored, earlier copy of the page.
Treating a clicked link's resulting request as somehow different in kind from a typed address, when both produce the exact same kind of request once resolved.
You can now explain why a relative address resolves differently depending on which page it sits on, and how to write a reference that resolves identically everywhere using a leading slash. You can also explain why clicking a link and typing an address produce the same kind of request, and why the back button does not always cause a new one to be sent.
Login - Jit4All
Login
Welcome back to Jit4All