Many times the developer needs to link other HTML pages in the Same Folder to make it organized and Relative Paths to simplify and easily to any linking process.
That’s why I’m going to show you how you can link your other HTML pages in the same folder by following easy steps with examples.
To link another HTML page in the same folder we will use an HTML <a> anchor tag with the herf attribute by providing the location of your file,
Example:
Html Page One.
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>This is Page 1</h1>
<p><a href="page2.html">Go to Page 2</a></p>
</body>
</html>Html Page Two.
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>This is Page 2</h1>
<p><a href="page1.html">Go to Page 1</a></p>
</body>
</html>The above file code contains the href attribute file location with <p> element and <a> anchor tag, when the user clicks on page 1 then the user will go to page 2, and if the user clicks on page 2 then the user will go back to page 1.
Below I also show all the steps with code examples, follow them carefully to link your files.
How to Link Another HTML page in the same folder
1 Step: Create a main Folder.
Before creating files, if you don’t have your main folder then you can create your folder in this step.
For example, as can be seen in the image below, I have a folder named ‘My Folder’.
Create first folder
2 Step: Add two HTML pages in the same folder
After that, create two HTML pages inside the same folder, for example, let’s say I have a ‘Home Page’ and an ‘About Page’.
As you can see in the image below.
HTML two Pages named “Home-page” and “About-page”
Add two HTML pages in the same folder
3 Step: Set <a> anchor tag with the herf attribute
Well, I did not share but inside those two pages, I created both the files inside of the VS Code editor, and also I created the content and styled it using HTML and CSS.
Hope you keep your content in both files, now coming to the main point,
Create an <a> anchor tag with the href attribute, here is an example,
Example:
<ahref=""></a>As you can see how I added an anchor tag on the home page, and similarly I will add the anchor tag in my second file which is about the page
Example:
<ahref=""></a>So we have finished adding the <a> anchor tag to both the HTML pages, and now we are going to give the path location for the attribute here.
4 Step: Provide the file location
Once you have added the <a> tag to both the HTML pages, now we need to provide the location of the file inside the href attribute.
For example, I want to link my homepage to my About page.
When the user clicks on the homepage, I want to direct them to the About page, and when they click on the About page, I want to bring them back to the homepage. Here’s how you can do it:
Both file location Example:
Linking home page to about page.
<ahref="about-page.html">Click Me</a>Linking about page to home page.
<ahref="home-page.html">Click Me</a>Now I have mentioned the file location inside both of the harf attribute, The Other file is now linked to a file in the same folder
5 Step: Save the file and see the preview
In these final steps, we are going to save both HTML pages and check if the final output is working correctly.
Here is the Output:
This way you can create links to other HTML pages in the same folder using the <a> anchor tag with the href attribute.
I hope this post helps you to link another HTML page in the same folder
Related Posts: