How to link html pages in same or different folders?

Viewed 396030

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

14 Answers

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>

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">

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

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

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

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. */

Related