Article Categories

Selected Reading

How to link back out of a folder using the a-href tag?

HTML Web Development Front End Technology

When working with HTML websites that have multiple folders and subfolders, you often need to create links that navigate back to parent directories. The anchor tag with the href attribute allows you to link back out of a folder using relative or absolute paths. This article demonstrates how to create navigation links that move from a subfolder back to its parent folder.

Syntax

Following is the syntax for linking back to a parent folder using relative paths

<a href="../parentfile.html">Back to Parent</a>

Following is the syntax for linking using absolute paths

<a href="/path/to/parentfile.html">Back to Parent</a>

The ../ notation moves up one directory level, while / starts from the root directory.

Using Relative Paths

Relative paths use the ../ notation to move up directory levels. One ../ moves up one level, ../../ moves up two levels, and so on. This method is portable and works regardless of the website's domain or hosting location.

Example Text Link with Relative Path

This example shows navigation between a parent folder and subfolder using relative paths

Parent File (parentFile.html in root folder):

<!DOCTYPE html>
<html>
<head>
   <title>Parent Folder Page</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Welcome to the Parent Folder</h2>
   <p>This page is in the root directory.</p>
   <a href="subfolder/childFile.html">Go to Subfolder Page</a>
</body>
</html>

Child File (childFile.html in subfolder/):

<!DOCTYPE html>
<html>
<head>
   <title>Subfolder Page</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h1>You are now in the subfolder</h1>
   <p>Use the link below to go back to the parent folder.</p>
   <a href="../parentFile.html">? Back to Parent Folder</a>
</body>
</html>

The ../parentFile.html path tells the browser to go up one directory level and find the parentFile.html.

Using Absolute Paths

Absolute paths start from the website root with a forward slash /. They provide direct routes to files regardless of the current folder location but are tied to the specific website structure.

Example SVG Image Link with Absolute Path

This example demonstrates using clickable SVG elements for navigation with absolute paths

Parent File (parentImage.html in root folder):

<!DOCTYPE html>
<html>
<head>
   <title>Parent Folder with SVG Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Click the blue circle to navigate to subfolder</h2>
   <svg width="100" height="100" viewBox="0 0 100 100">
      <a href="/images/childImage.html">
         <circle cx="50" cy="50" r="40" fill="blue" stroke="#003d82" stroke-width="3"/>
         <text x="50" y="55" text-anchor="middle" fill="white" font-size="12">Go</text>
      </a>
   </svg>
</body>
</html>

Child File (childImage.html in images/ subfolder):

<!DOCTYPE html>
<html>
<head>
   <title>Subfolder with SVG Back Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h1>You are in the images subfolder</h1>
   <h3>Click the red circle to return to parent folder</h3>
   <svg width="100" height="100" viewBox="0 0 100 100">
      <a href="/parentImage.html">
         <circle cx="50" cy="50" r="40" fill="red" stroke="#b71c1c" stroke-width="3"/>
         <text x="50" y="55" text-anchor="middle" fill="white" font-size="11">Back</text>
      </a>
   </svg>
</body>
</html>

The absolute path /parentImage.html navigates directly to the root folder file.

Relative vs Absolute Path Comparison

Following table compares relative and absolute paths for folder navigation

Relative Paths	Absolute Paths
Use `../` to go up directories	Start with `/` from website root
Portable across different domains	Tied to specific website structure
Example: `../parent.html`	Example: `/folder/parent.html`
Work in local file systems	Require web server for testing
Flexible when moving folder structures	Must update if folder structure changes

Multiple Level Navigation

For deeper folder structures, you can chain multiple ../ to navigate up several levels.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Deep Subfolder Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Navigation from Deep Subfolder</h2>
   <p>Current location: /folder1/folder2/deepfile.html</p>
   
   <ul>
      <li><a href="../parentfolder2.html">Go up 1 level (folder2)</a></li>
      <li><a href="../../parentfolder1.html">Go up 2 levels (folder1)</a></li>
      <li><a href="../../../index.html">Go to root level</a></li>
   </ul>
</body>
</html>

Each additional ../ moves up one more directory level in the folder hierarchy.

Conclusion

To link back out of a folder, use relative paths with ../ notation to move up directory levels, or absolute paths starting with / to navigate from the website root. Relative paths are more flexible and portable, while absolute paths provide direct routes but depend on specific folder structures.

Saba Hilal

Updated on: 2026-03-16T21:38:54+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next