 |
| NAV TAG |
Introduction of HTML5 <nav> Tag
In this post, you will learn about the HTML <nav> tag which is an html5 element. It creates a section with a collection of website navigation links. html5 <nav> tag is commonly used to organize the links on the webpage or website.
Navigation is an important element of the website. It is also called the navigation bar. Navigation links to other important webpages of the website. This is part of the core design of any website.
All links on the website can't be in the navigation bar. Only links that help the user access your website easily, should be included in navigation.
In most cases, the navigation is shown below the header. But it can also be used in the sidebar. Navigation is also displayed on all the pages of your website, just like Header so that the user can access important parts like Home Page, Blog, Services, and Contact etc. from any place in the website.
Before HTML5, developers used to design navigation bars by div element. An example of this is being given below.
<div id = "navigation">
<ul>
<li> <a href=""> Home </a> </ li>
<li> <a href=""> Blog </a> </ li>
<li> <a href=""> Services </a> </ li>
<li> <a href=""> About Us </a> </ li>
<li> <a href=""> Contact Us </a> </ li>
</ ul>
</ div>
As you can see in the example above, navigation has been created by creating lists inside the div. Div is a container element. It does not have any significant meaning. It is skipped by the search engine during the crawling. If you will create navigation in this way, search engines will have difficult to identify it. This will be bad practice in terms of SEO.
HTML5 provides <nav> tag to define the website's navigation. This tag can be easily understood by search engine crawlers and can find out which is the important section of the website. This tag also improves the SEO for your website. You can also use the <nav> tag to create breadcrumbs for an article.
Syntax of HTML5 <nav> Tag
The general syntax of the <nav> tag is being given below.
<nav>
// Navigation links here
</ nav>
As you can see in the syntax above, there is not much difference between the div and nav tag syntax. But in terms of search engines, this difference is very important. Also, it is easy for the programmer to access code because a webpage can have many div elements and it will be difficult to manage so many div elements.
Attributes & Events of HTML5 <nav> Tag
<nav> tag supports all global attributes (id, class, etc) and event attributes (onmouseover, onfocus, etc.) of HTML.
How to use nav tag in html5?
In the above example, a header and navigation have been created. This example produces the output below.
Google Chrome 6
Internet Explorer 9
Firefox 4
Safari 5
Opera 11.1
Compatibility with Browsers
The HTML5 <nav> tag supports all popular browsers. Such asGoogle Chrome 6
Internet Explorer 9
Firefox 4
Safari 5
Opera 11.1
This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
ReplyDeleteWordPress development company in Chennai
hi
ReplyDeletex
ReplyDeletezcx
ReplyDeleteThanks for giving an Excellent Blog, it's very useful information to us, keep on it doing like this, I eagerly waiting for your updates, Thank you So much...
ReplyDeleteProWeb365