Relative Links

So far, we have linked to pages with addresses like https://en.wikipedia.org/. Such links are called absolute, because they contain the complete address with all its parts.

The other kind are relative links. A relative link looks like this: ./dog.html. To understand it, we need two terms:

• A folder (also called a directory) is a place where files are stored, just like the folders on your computer. The files of a website are stored in folders too.
• A domain is the name of a website in its address, for example startcoder.com or wikipedia.org.

In ./dog.html, the ./ means "in the current folder" (the folder of the page with the link), and dog.html is the file we are linking to.

We use relative links to link to pages on our own domain. To link from startcoder.com/index.html to startcoder.com/about-us.html, we would use this relative link:

<a href="./about-us.html">About Us</a>

But to link from startcoder.com to wikipedia.org, we need an absolute link.

Our exercise now has two files: index.html with the cat page and dog.html with the dog page. You can switch between them above the editor. index.html is the usual name for the main page of a website.