HTML5 <nav> Tag
Introduction to HTML5 <nav> Tag
Navigation website का एक महत्वपुर्ण element होता है। इसे navigation bar भी कहा जाता है। Navigation में website के दूसरे important pages की links होती है। ये किसी website की core design का हिस्सा होता है।
Website की सभी links navigation में नहीं हो सकती है। सिर्फ वे ही links जो user को आपकी website आसानी से use करने में मदद करती है, navigation में include की जानी चाहिए।
ज्यादातर cases में navigation को header के नीचे show किया जाता है। लेकिन इसे sidebar में भी use किया जा सकता है। Header की ही तरह navigation भी आपकी website के सभी pages पर show होता है। ताकि user website में किसी भी जगह से महत्वपूर्ण parts जैसे की Home page, Services आदि पर पहुँच सके।
HTML5 से पहले developers div element द्वारा navigation बार design करते थे। इसका उदाहरण निचे दिया जा रहा है।
<div id="Navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Services</a></li>
</ul>
</div>
जैसा की आप ऊपर दिए गए उदाहरण में देख सकते है div के अंदर lists create करके एक navigation create किया गया है। Div एक conatiner element होता है। इसका कोई महत्वपूर्ण मतलब नहीं होता है। साथ ही crawling के दौरान ये search engines द्वारा skip कर दिया जाता है।
जब आप इस प्रकार एक naviagtion create करते है तो search engines को इसे identify करने में परेशानी होती है। ये SEO की दृष्टि से bad practice है।
HTML5 आपको website का navigation define करने के लिए <nav> tag provide करती है। इस tag को search engine crawlers आसानी से समझ सकते है और पता लगा सकते है की website के महत्वपूर्ण sections कौन कौन से है। इस tag से आपकी website का SEO भी improve होता है।
<nav> tag को आप किसी article के लिए breadcrumbs create करने के लिए भी use कर सकते है।
Syntax of HTML5 <nav> Tag
<nav> tag का general syntax निचे दिया जा रहा है।
<nav>
// Navigation links here
</nav>
जैसा की आप ऊपर दिए गया syntax में देख सकते है div और nav tag के syntax में ज्यादा अंतर नहीं है। लेकिन search engines की दृष्टि से ये अंतर बहुत महत्वपूर्ण है। साथ ही programmer को भी coding में आसानी हो जाती है क्योंकि एक webpage में कई div elements हो सकते है और इतने div elements को manage करना मुश्किल होता है।
Attributes & Events of HTML5 <nav> Tag
<nav> tag HTML के सभी global attributes (id, class आदि) और event attributes(onmouseover, onfocus आदि) को support करता है।
Example: <nav> का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>Navigation Demo</title>
</head>
<body>
<header>
<h1>Best Hindi Tutorials</h1>
<p>Computer Science & IT Tutorials in Hindi</p>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="'>About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Recommend</a></a>
</li>
</ul>
</nav>
</body>
</html>
ऊपर दिए गए उदाहरण में एक header और navigation create किया गया है। ये उदाहरण निचे दिया गया output generate करता है।
