How to use "nav" tag in HTML5

Posted By  jalpesh On 15 May 2011 03:05:31
emailbookmarkadd commentsprint
No of Views:3005
Bookmarked:0 times
Votes:0 times

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.

 

Sign Up to vote for this article
Other popular Tips/Tricks
    This Technical tip explains how to use ASP.NET web services to create barcodes. We will also create Windows Forms and Console application to request barcode image. Web services provide a major benefit in integrating the software with external applications. With standardized request/response model, any client application that can utilize XML web service can benefit from it. Aspose.BarCode for .NET can easily be used in ASP.NET web services to generate the barcodes and serve the barcode image to
    Published Date : 30/Oct/2013
    In this tip, I will explore that how to Pass Muliple Fields with Gridview HyperLink Column
    Published Date : 13/Sep/2011
    Recently I was playing with HTML5 and I was in need of the HTML5 intellisense in Visual Studio 2010. I found a great extension which will provide me a great intellisense for HTML5. I thought its great to share with you all. You can download that tool from following link.
    Published Date : 15/May/2011
    In this tip, i will show how to verify Page is secure or Not using in ASP.NET and JavaScript.
    Published Date : 11/Apr/2011
    Recently one of the my friends asked about how to create a web request in asp.net to a url outside of project. So I decided to write a small tip regarding this. This web request can be easily created with httpwebrequest class and you can easily consume the response we are getting from this
    Published Date : 24/Jan/2011
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top