html

HTML Nav Tag

You might have seen the different links on the web pages that you visit on a daily basis. Clicking on any of these links takes you to a different associated page. In this article, we will learn the usage of an HTML tag that lets us create such links on our web pages. 

Purpose of the nav Tag in HTML

The HTML nav tag is used to create the navigation links. You simply use this tag to enclose as many navigation links as possible. When you do this, it creates hyperlinks to the specified pages on your web page. And by clicking on these links, you can easily navigate to the web pages associated with these links. Now, let us go through the usage of this tag in HTML with the help of an example. 

Usage of the nav Tag in HTML

To demonstrate the usage of the nav tag in HTML, we designed an example for you where we provide the two navigation links on our web page to navigate the two different sites respectively, i.e. LinuxHint and Google. The exact HTML script for this example is shown in the following image:

In this example script, we first used the “h1” tag to specify the heading of this web page followed by a paragraph tag to explain the purpose of our HTML script. Then, we used the “nav” tag of HTML and enclosed the two “href” tags within it to mention the links of our respective websites. We also provided the labels for these websites, i.e. LinuxHint and Google, that appear on our web page as hyperlinks so that the user can simply click on the label of his/ her choice to access the desired website.

When we executed this HTML script, the following web page appeared on our browser:

You can see on the web page shown in the previous image that our two hyperlinks appeared on this web page. When you click on any of these links, say LinuxHint, you will instantly be redirected to the official website of LinuxHint as shown in the following image:

Similarly, if you click on the other links, i.e. Google, you will be redirected to the Google search page as shown in the following image:

Conclusion

In this article, we talked about the nav tag of HTML. This tag is used to include the different navigation links to your web pages. After explaining the purpose of this HTML tag in detail, we demonstrated its usage by sharing a simple example. By following this guide, you will conveniently be able to add the relevant navigation links to your web pages using HTML.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.