Links in Html are vital components of a webpage. Without links you will just have to be entering each page address whenever you want to visit that page.
There are two common Navigation using links in Html, these are;
- Internal navigation
- External navigation
Internal Navigation using links in Html
If you want to navigate to another page which is in the same folder with you current webpage, all you need is use the anchor tag “a”
See example below
Assuming I have two pages on my small website, “first-page.html” and “second-page.html”
Let’s take the code below as my first page
Html
<h3>Welcome to my website first page. hope you find what you need</h3>
<ul>
<li>
<a href="" >Go to Next Page</a>
</li>
</ul>
If I want to navigate to the second page using html links, I will insert the page name that I want to navigate within the opening and closing quotes of “href”
Your new Html code becomes
Html
<h3>Welcome to my website first page. hope you find what you need</h3>
<ul>
<li>
<a href="second-page.html" target="_blank">Go to Next Page</a>
</li>
</ul>
Css
Css
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: green;
font-weight: bold;
}
Since, i want to navigate to another page, of first need to create that page
And my second page is;
Html
<h3>Welcome to my second page. Happy reading</h3>
<ul>
<li>
<a href="first-page.html">Home</a>
</li>
</ul>
Css
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: green;
font-weight: bold;
}
Result
When you click on the html link which says “Go to Next page”
As long as the page address is correct, you will surely navigate to “second-page.html”
Mine is correct, so when I click on the html link, the result is
My navigation using links in Html was successful
You can see I also added a link to navigate back to my “first-page.html”, when i click on it, I will be redirected back to my “first-page.html”.
So this is how you can navigate to other page within the same project folder.
So this is how you can navigate to other page within the same project folder.
External Navigation using links in Html
The only difference between internal and external navigation using links is that “navigating within your project doesn’t require internet connection while navigating to an external page outside your project folder requires internet connection”
Example
Assuming you want to navigate to facebook from your webpage, just insert the address of the page you want to navigate to within the “href” quotes as shown below
Html
<h3>Welcome, contact us on facebook</h3>
<ul>
<li>
<a href="https://www.facebook.com">Facebook</a>
</li>
</ul>
Css
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: green;
font-weight: bold;
}
Result
At the moment, I am not connected to the internet
When I click on the link, this is the result
Once you are connected to internet, you will redirected to facebook when you click on that html link as shown below
So this is how you navigate within and outside your project folder using Html links.
Hopefully this tutorial was helpful