How to use "nav" tag in HTML5

Introduction

In this tip, i will show how to use the <nav> tag in HTML5 for web site navigation.The HTML5 is great new version of HTML with great features. I am exploring that in great details for our forthcoming projects. I found a great tag that can be used in all websites for the navigation. <nav> tag defines a area for navigation in whole HTML markup.

The HTML5 specification for nav tag is like following. You can find all the HTML 5 specification here.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

<nav> tags can be used as navigation area and under it you can put the group of links that will use for navigation of area. For example if you have downloaded the ASP.NET MVC3 tool update with HTML5 then you can see they have defined the navigation area with nav tags like following.

<nav>
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
    </ul>
</nav>

As you can see in above they putted Home and About link in the navigation. So now its with the nag tag the html mark-up is more readable. Once its loaded in browser it and if you view source it will be populate as groups of link in nav tag like following.

<nav>
               <ul id="menu">
                   <li><a href="/">Home</a></li>
                   <li><a href="/Home/About">About</a></li>
               </ul>
</nav>

So that’s it You can see its very easy to use and now we have very readable and clear markup with HTML5. Happy Programming.