How to link html pages in same or different folders?

How can I link to html pages if they are in same or different folders without writing full path?

Within the same folder, just use the file name:

<a href="thefile.html">my link</a>

Within the parent folder's directory:

<a href="../thefile.html">my link</a>

Within a sub-directory:

<a href="subdir/thefile.html">my link</a>

Also, this will go up a directory and then back down to another subfolder.

<a href = "../subfolder/page.html">link</a>

To go up multiple directories you can do this.

<a href = "../../page.html">link</a>

To go the root, I use this

<a href = "~/page.html">link</a>

In addition, if you want to refer to the root directory, you can use:

/

Which will refer to the root. So, let's say we're in a file that's nested within a few levels of folders and you want to go back to the main index.html:

<a href="/index.html">My Index Page</a>

Robert is spot-on with further relative path explanations.

You can go up a folder in the hierarchy by using

../

So to get to folder /webroot/site/pages/folder2/mypage.htm from /webroot/site/pages/folder1/myotherpage.htm your link would look like this:

<a href="../folder2/mypage.htm">Link to My Page</a>

use the relative path

main page might be: /index.html

secondary page: /otherFolder/otherpage.html

link would be like so:

<a href="/otherFolder/otherpage.html">otherpage</a>

If you'd like to link to the root directory you can use

/, or /index.html

If you'd like to link to a file in the same directory, simply put the file name

<a href="/employees.html">Employees Click Here</a>

To move back a folder, you can use

../

To link to the index page in the employees directory from the root directory, you'd do this

<a href="../employees/index.html">Employees Directory Index Page</a>

I would caution you: if you are using absolute paths, then your application cannot be installed in a "subdirectory" of the server!

eg, http://yourserver.com/yourapp may work, but http://myserver.com/apps/yourapp will not!

Short answer:

. is for current directory

.. is for upper directory as in cd .. command on shell.

Simple yet tricky, I write this answer primarily for myself not to forget next time.

ademSite/
├── index.html
└── style.css

The link to CSS in index.html:

<link rel="stylesheet" href="style.css"> or <link rel="stylesheet" href="./style.css">

ademSite/
├── index.html
└── stylefiles
    └── style.css

This case it should be:

<link rel="stylesheet" href="stylefiles/style.css"> or <link rel="stylesheet" href="./stylefiles/style.css">

├── html
│   └── index.html
└── stylefiles
    └── style.css

In this case path must be: <link rel="stylesheet" href="../stylefiles/style.css">

Use

../

For example if your file, lets say image is in folder1 in folder2 you locate it this way

../folder1/folder2/image

Answer below is what I created to link html contents from another shared drive to the html page I would send out to managers. Of course, the path is relative to your using, but in my case, I would just send them the html, and everything else that is updated from load runner dynamically would be updated for me. Saves tons of paper, and they can play with the numbers as they see fit instead of just a hard copy this way.

SRC="file://///shareddrive/shareddrive-folder/username/scripting/testReport\contents.html" NAME="contents_frame" title="Table of Contents"

For ASP.NET, this worked for me on development and deployment:

<a runat="server" href="~/Subfolder/TargetPage">TargetPage</a>

Using runat="server" and the href="~/" are the keys for going to the root.

href="./page.htm" for the same directory

href="../page.htm" parent directory

href="~/page.htm" root directory or the upper most dir.

This worked for me <a href="preferedfile name.html">to be clicked <a/>

When I Was creating a webpage, I found out that With moving Html files to different Folders, It changes the paths of the images, videos, music, PDF files, etc. With them, you have to go out of the file the HTML is located in, with the ../HTML. Then when your out, depending on where your page content is, insert,

 <a href="Meme/WP/Chipmunk.html">Chipmunk Memes</a>
 
 */ This is where the HTML is located ^^^^^^ */
 
 <img class="demo cursor" src="../6.png" width="100" height="50" onclick="currentSlide(6)" alt="Sasha Having Some Fun">
 
 */ This is where the images are located. The "../6.png" is the image file, and it is located one directory back. */