A Guide on Nav Element: HTML for Beginners

This beginner html guide will give you a clear idea of what nav elements are in html page or document, why we use nav elements and how to use nav elements to create navbars in pure html.

Photo by Hal Gatewood on Unsplash

What Is A Nav Element

A nav element is an element in HTML that contains links to navigate or browse between several sections of a web page. The nav element has open and closed tags shown as <nav> and </nav> respectively. The anchor links for connecting between pages or within the same page is contained inside the nav tags.

Why Use A Nav Element

A nav element as the name suggests, is used to create navbars that helps in providing a smooth navigation through HTML pages or documents.

Nav elements contain links to navigate between different pages of a document or website or navigate to external pages in another website.

Hence nav element helps the user in having better website accessibility and smooth browsing experience since users could easily move between different sections of content inside a website by clicking different navbars. For example , if you are browsing a web page and currently at the Home page, you will be able to move through the other sections from home to “about “, contact” and more.

Also, the nav elements help in structuring the page by allowing a semantic flow and distribution of content in different sections just with the help of anchor links to connect to different content by clicking the different navbars and this is done by creating navbars that we have explained further in the below paragraphs.

How To Code a Horizontal Navbar in HTML

<nav class="navbar"

    <a href="#">HOME</a>

   <a href="#">POSTS</a>

    <a href="#">CONTACT</a>

</nav>

In the above code block you create a div open and close tag and inside the div container you need to write the anchor tag <a>

The Finished Navbar View

navbar in html

Code Explanation

In this navbar image you see that there are three menu tabs or navigation bars as you refer to it. The first navigation bar menu is the HOME tab second navigation bar menu is the POSTS and the last one is CONTACT . I know, you are going to say, this is so ugly! That's because we haven't used CSS here. You can see these tabs have lines under them but that's because you haven't yet styled these tabs. To remove the lines from underneath the tabs and make the navigation bars look awesomely aesthetic, we need to use CSS for styling them but this post is about using pure HTML to create navigation bars and the usage of CSS here is beyond the scope of this post, but, I will be showing you how to style the same in a later post.

We have used anchor tags with href attributes to create clickable links and here we write “#” instead of the actual url address because this is just a demo example.

Then in order to show what each nav bar tab stands for we need to give names . hence we write the names “Home”, “Posts” and “Contact” respectively in between the open and closed anchor tags

How To Code A Vertical Navbar in HTML

<nav class="navbar">

    <ul>

    <li><a href="#">HOME</a></li>

    <li><a href="#">POSTS</a></li>

    <li><a href="#">CONTACT</a></li>

    </ul>

</nav>

The Finished Navbar View

The finished look is ugly because we haven't started applying CSS yet and once I start posts on CSS after you complete learning HTML, I will be posting/teaching a combination of html plus css. More on that later . Let's help you in completing HTML first!

Code Explanation

In the above vertical navbar we have used the code similar to the previous horizontal navbar, however, there is a slight difference here in the sense that we have used the unordered list in this case to render the vertical navbar as shown in the screenshot above. If you have missed out on the post for HTML Lists, you may refer to this post.

Conclusion

We learnt what is a nav element and how to use nav elements to create a navbar for a website. This was about creating nav bar in html page using nav elements efficiently to not only enhance the layout format of the web page but also to enable a smooth navigation between different sections of content in web pages.

We also learnt how to create both horizontal and vertical navbars using html code.

Using a navbar helps in navigating between the different pages of the website as demonstrated above.

With a single click we can navigate between the different pages of the website, namely, HOME, POSTS and CONTACT respectively in the above examples. You can have any number of navbars as per the requirement of the web page or documents.

More later once we cover more html elements in the later posts to follow.

If you have missed my previous html posts read up these: