How to Link HTML Pages Located in Different Folders

Link HTML Pages Located in Different Folders

Learn How to Link HTML Pages Located in Different Folders. You need to link to another page in your HTML folder and these pages will be located in the same or a different folder. To link by adding a link to another HTML page in the same folder, do the following. If the target page is located in a different folder.

If you want to implement HTML pages and files in different folders, you can use several methods to link HTML files in different folders. For webmasters, the first thing to know about linking HTML pages in different folders is that the page you have requested should load.

How to link different pages in HTML

Links are the lifeblood of websites, and that’s especially true for websites that have a lot of pages. Most web designers use HTML code to implicitly create links in their code to connect one page to another.

Usually, having lots of open tabs on a browser is not a problem, but it’s not practical to link back and forth between a dozen pages or more. A link will be provided from the HTML file to the other file. If a different folder is a destination, the target file will be in a specific directory in a folder.

Follow these steps to link HTML pages together in different folders, including one for the same folder and another for a different one.

1. Create an HTML block-like button or text to link another page to it.
2. To define a link, create an HTML anchor tag <a>Some text<a/>
3. Inside the <a> tag put an HTML href attribute, to define the link address.
4. Create file link as a value of href. i.e. href = “yourFilePath”
5. Use the target attribute to define where to open the linked document.

Video Tutorial – Steps to link one page to another in HTML

You can watch the video tutorial to Link HTML Pages Located in Different Folders or the same folders.

Also Read: What are the 7 Basic Parts of a Website Homepage | A Complete Website Structure

How to link one page to another in HTML

Here are three ways to link your HTML pages/files together on your website.

1) Both files are Within the same folder

When both HTML files are located in the same folder, use the following method:

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

2) Both HTML files are in different folders Within the parent folder

When both HTML pages are located in different folders within the parent folder’s directory, use the following method:

<a href="/foldername/thefile.html">link text</a>

3) The HTML file is in the sub-folder within the parent folder

The HTML file is located in the sub-folder within the website folder within the parent folder’s directory, use the following method:

<a href="subfolder/filename.html">my link</a>

Final Words

If your website has a lot of content and you choose to organize it by a particular theme, you can be more creative in how you link them together. It’s often a good idea to use a mouse to hover over images and links within your content. Some designers are even able to build content hierarchy into the design by moving key sections into more prominent places.