Interactive online courses HTML Academy
2026-03-09 14:12 Diff
https://htmlacademy.org/courses/html-css-basics/links-and-images/relative-addresses

Although our blog is on the web, but when we’re working on it, we do it on our computer—that is, locally. So we can test changed pages before publishing them, links to other blog pages should open the file on our computer, and not from somewhere on the Internet. You need to use a special address for these types of links, such as, for example:

<a href="day-2.html">Second blog entry</a>

This type of address is called relative. In contrast to “normal” addresses, it does not contain a full website address. In order to resolve a relative address and reach its destination, the browser must decode it. To do this, it typically starts with the position of the current page. For example, there are two files in the c:/blog folder:

c:/blog/ |-index.html // This page is open in the browser |-inner.html

The page c:/blog/index.html is open in the browser, and it contains a link with a relative address inner.html. In order to follow this link, the browser looks at the location of the open page and replaces the last part in it:

c:/blog/index.html + inner.html // Replace the last part c:/blog/inner.html // Open this file

Relative addresses work not only for files on a computer, but also for pages on a network. If you were to publish the two files from the example on the Internet (without changing their relative position to each other), then the link would still work. The relative address inner.html on the page https://site.com/blog/index.html can be decoded as follows:

https://site.com/blog/index.html + inner.html // Replace the last part https://site.com/blog/inner.html // Open this address

Let’s add some more relative links to the main blog.