In this guide, you will learn how to link two pages on your website using basic HTML. Linking pages allows users to navigate between different parts of your site easily. Let’s get started!
- Create Two HTML Files First, create two HTML files that you want to link. For example, let's create one called index.html (your home page) and another called about.html (your about page).
Here’s what the HTML for each file could look like:
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <p><a href="about.html">Go to About Page</a></p> </body> </html> about.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Page</title> </head> <body> <h1>About Us</h1> <p><a href="index.html">Go to Home Page</a></p> </body> </html> 2. Linking the Pages
To connect the two pages, we use the tag in HTML, which defines a hyperlink. The href attribute inside the tag specifies the path to the file you want to link.
For example:
<a href="about.html">Go to About Page</a> In this example, the link will take the user to the about.html page when clicked.
Similarly, on the About Page, you can create a link back to the Home Page using:
<a href="index.html">Go to Home Page</a> - File Structure For these links to work correctly, both files should be located in the same folder. If your HTML files are in different folders, you'll need to specify the correct file path in the href attribute.
Here’s what your file structure should look like if both files are in the same folder:
/website-folder ├── index.html ├── about.html If the files are in different folders, adjust the href attributes to reflect the correct paths.
- Testing the Connection After setting up your links, open the index.html file in a web browser. You will see a link that takes you to the About Page. When you click on it, it should navigate to about.html. Similarly, on the About Page, clicking the link should bring you back to the Home Page.
Conclusion
That’s how you can easily connect two pages on your website using HTML. This is a fundamental step in building a website, ensuring smooth navigation for users. Happy coding!