Please bear with me since I am a noob at html.

Let's say I have a local directory called website saved inside my local Downloads folder, and inside this website directory I have an html file called page.html

Inside the website directory, I also have another directory called folder

Inside the folder directory, I have an html file called page2.html

In the html code for page.html, there is this line of code: <a href="/website/folder/page2.html">page 2</a>

When I open page.html locally in a web browser, the file path name is file:///Users/myuser/Downloads/website/page.html.

When I then click that page 2 link on the webpage, it brings me to file:///website/folder/page2.html instead of the correct path file:///Users/myuser/Downloads/website/folder/page2.html so it doesn't work.

I know I could change the href link in page.html to file:///Users/myuser/Downloads/website/folder/page2.html but I want this link to work even if I move the website directory into a different local directory. For example, the href link would work whether I have the website directory inside my Downloads, Desktop, or Documents folder, or even if I saved this website directory onto a different PC.

Is there a way to word the href link so that this can happen?

CodePudding user response：

You’ll need to use href="../page.html" in your page2.html file.

I recommend you read up on

Image from Mozilla at the before-mentioned URLs

You can skip certain parts at the beginning of a URL, which will give you a relative URL. These parts will be replaced by the user agent (the browser) from the current location.

For example, you can use scheme-relative URLs:

<a href="//myhost.example.com/page.html">

If the page containing that code is served via https, the link will also be completed to https: https://myhost.example.com/page.html. If it’s served via ftp, it will complete to ftp://myhost.example.com/page.html.

The same goes for other parts, and when referencing other pages from the same site, you would use path-relative URLs.

Absolute and relative paths

Now, concerning the path part of a URL, there is also a distinction between absolute paths and relative paths, just like in your operating system.

<a href="/page.html"> is using an absolute path. This means go to the root directory of the same drive or host, to find page.html.

In your case, the page2.html is delivered from file:///Users/myuser/Downloads/website/folder/page2.html.

So when you use a path beginning with / (absolute), it will refer to the root of the drive, so basically C:\ and complete to file:///page.html.

<a href="../page.html"> now is a relative path, relative to the current location. It’s saying go up one directory to find page.html.

So with the same location as before, this will complete to file:///Users/myuser/Downloads/website/page.html.