Copied to clipboard

Absolute and relative links

Webpages can link to lots of different files: images, other pages, CSS files, JS scripts, etc.

If you don't use the exact correct link, the link you create may not work at all.

File paths

When you create a link, you're linking to a file paths. There are two types of file paths, absolute and relative.

Absolute links are full links, starting from some type of root.

C:\Program Files\

and

https://neocities.org/

are both absolute. In the first example, C:\ is the root. In the second, https:// is the root.

You can also write absolute links to files on your webserver. For example, if you create a link that looks like this:

<a href="/">Link</a>

It will link to your root folder's index.html file, your homepage. Your "root" or "home" folder is considered the starting point for your website. It is within this folder that your homepage, index.html lives.

If you had a folder called about you could link to it like this:

<a href="/about/">About</a>

To easily remember this, just remember that the first / represents "yourwebsite.com".

A great thing about absolute links is that the links will continue working even if you shuffle around the pages (but keep the file names of the links themselves in tact). This will become more clear after explaining relative links below.

On Neocities, this area is called Home at the top of the site file manager.

Relative links are relative to the page you are working on.

If the file you're linking to is in the same folder as the file you're linking from, you can simply use the file name as a link:

<a href="about.html">About</a>

If it's in the same directory but in a folder, you can link to it like this:

<a href="about/">About</a>

Notice how this link does not use the leading / - that would make it an absolute link, and could potentially link to a totally different location.

If it's a file within the previous directory:

<a href="../about.html">About</a>

or, two directories up:

<a href="../../about.html">About</a>

And so on.

In my experience, it can take some time to get used to visualizing and understanding relative links. When I started out, I relied heavily on absolute links for being sure I was linking to the correct file.