hashnode-blogs

Links and Navigation in HTML 🤝

You must have seen links, mostly blue color underlined texts starting with https: and ending with .com or .in etc. somewhere on your mobiles and web browsers. They usually take you to another screen or website and can also navigate within the page.

A typical example of links could be search results on Google’s webpage:

How to put a link on your webpage? 🤔

You can use an anchor tag for that <a> </a> .

The code:

<a href="https://google.com"> click me to go on google home page </a>
<br>
<a href="https://w3schools.com" target="_blank"> Click me to go on W3Schools home page </a>

Check out the live preview of the above code.

The output of the above code:

The breakdown of the code:

Create four HTML files in your website’s folder. (You can create HTML files with any name you want ). Each HTML file is a separate page of a website.

How I will connect these pages?

I will use an anchor tag on each page and will give relative paths of other pages to href attribute, like href="./projects.html , href="./stories.html" etc.

For example: If I have two pages index.html and stories.html and I want to connect them.

A visual representation:

So in index.html , I will use an anchor tag and pass the path of stories page as ./stories.html , because both the files are in the same directory.

<a href="./stories.html"> Go to Home Page </a>

and in stories.html , I would pass the path of index page as ./index.html .

<a href="./index.html"> Go to Home Page </a>

Let’s say I have another file bikes.html in vehicles folder inside my website’s folder.

and I want to connect the bikes page to index page.

I would write the path in index.html as:

<a href="./vehicles/bikes.html"> Go to bikes pagees </a>

and in vehicles/bikes.html I would write the path of index page as

<a href="../index.html"> Go to homepage </a>

My directory structure looks like this. The folder for my website is links-and-navigation .

An example to summarize the above concept 🍭

Here are the codes

What is the navigation within the page?

There are links on a page when clicked scroll the page and takes you to the desired location within that page.

See the example page here, click on the links of vegetable names and notice the scrolling effect

💠 Here is the source code of the above page

Now, how you can code this in your webpage:

There are two steps to it

⚡id attribute should be unique within a page.

Two tags or html elements can’t have same id.

Exercises 🏌️

Here are some easy, and worth practicing exercises on W3Schools.

Source Codes 💠

In the next blog, I will be writing about Forms and Input Elements in HTML.