ایجاد نویگیشن وب سایت (navigation) با استفاده از تگ <nav> : با آمدن تکنولوژی HTML5 ، در زبان اسکریپتی HTML پیشرفت و بهبود چشمگیری ایجاد شد . یکی از این تغییرات بزرگ که در صنعت طراحی وب همراه با این تکنولوژی حاصل شد ، معناگرا شدن دنیای وب است . در عصر حاضر ، به فضای وبی که در اختیار ما می باشد اصطلاحا نسل سوم وب یا به عبارت بهتر وب معنایی (Semantic Web) اطلاق می شود . از جمله ویژگی های HTML5 این است که تعداد زیادی تگ معنایی به تکنولوژی HTML اضافه کرده است و همچنین تعدادشان در حال افزایش است . از آنجایی گفته شده پس از HTML5 نسخه دیگری از HTML نخواهد آمد و سایر تغییرات و به روز رسانی های آینده این تکنولوژی به صورت جزیی و موردی به آن اضافه می شود ، بهتر است برای طراحی سایت بهینه و به روز ، طراحان سایت در بازه های زمانی مختلف آخرین تغییرات و به روز رسانی های این تکنولوژی را بررسی کنند . لازم به ذکر است که استفاده از ویژگی های به روز تکنولوژی های طراحی سایت بسیار در بهینه سازی سایت برای موتورهای جست و جو یا هما سئو سایت (SEO: SearchEngineOptimization) حائز اهمیت و مفید می باشد و پس از نسخه HTML5 استفاده از تگ های معنایی تبدیل به یک امر واجب در طراحی سایت شده است .
یکی از تگ های معنایی جدید که در HTML5 معرفی شد و بسیار مورد استفاده قرار می گیرد و از اجزاء اصلی هر وب سایت است ، تگ <nav> می باشد که به شما این امکان را می دهد تا لینک های نویگیشن وب سایت خود را گروه بندی کنید و از نظر ساختاری بسیار به مفهومی تر شدن کدها و قالب سایت کمک می کند . در این مقاله به طور خاص تگ <nav> و مشخصه ها و طرز استفاده آن در ساختار قالب سایت را بررسی خواهیم کرد .
چطور از تگ <nav> استفاده کنیم ؟
در نگاه اول استفاده از آن بسیار ساده به نظر می رسد ، اما نوع استفاده
از آن باید با کمی دقت انجام شود و این تصمیم به عهده توسعه دهنده سایت می
باشد .
اغلب توسعه دهندگان front-end وب سایت عادت کرده اند که نویگیشن سایت را به این صورت ایجاد کنند :
<div id=”nav”>
<ul>
<li><a…. etc
یا
<ul id=”mainNav”>
حال با استفاده از <nav> میتوانید با کمی تغییر در کد خود ، نویگیشن سایت را به این صورت بنویسید :
<nav>
<ul>
<li><a href=”/index.html”>Home</a></li>
<li><a href=”/about/”>About</a></li>
<li><a href=”/blog/”>Blog</a></li>
</ul>
</nav>
مشخصه های تگ <nav>
در داکیومنت های ارائه شده برای HTML5 ، تگ <nav> به این صورت تعریف شده است :
” المانی در صفحه وب که در تگ <nav> قرار دارد معرف بخشی از صفحه است که حاوی لینک های نویگیشن سایت به داخل همان صفحه یا صفحات دیگر سایت می باشد .باید در نظر داشت که همه لینک های موجود در صفحات یک وب سایت ، نویگیشن سایت محسوب نمی شوند و تنها استفاده از این تگ برای بلاک هایی که دارای تعداد زیادی لینک داخلی هستند مناسب است . به عنوان مثال معمول است که در قسمت پایینی هر وب سایت (footer) ، تعدادی فهرست وجود دارد که بخش های اصلی سایت لینک شده اند ؛ طبیعتا برای این فهرست ها استفاده از تگ <footer> بسیار مناسب تر و معنایی تر از استفاده از <nav> می باشد . به طور کلی از <nav> معمولا برای لینک های موجود در فهرست نویگیشن هدر سایت (header) استفاده می شود . ”
به مثال زیر دقت کنید ، لینک هایی زیادی در این مثال آورده شده اما تنها یکی از این فهرست ها به عنوان بخش نویگیشن وب سایت معرفی شده است :
<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href=”/news.html”>News</a> –
<a href=”/blog.html”>Blog</a> –
<a href=”/forums.html”>Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href=”/articles.html”>Index of all articles</a></li>
<li><a href=”/today.html”>Things sheeple need to wake up for today</a></li>
<li><a href=”/successes.html”>Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<article>
<p>…page content would be here…</p>
</article>
<footer>
<p>Copyright © ۲۰۰۶ The Example Company</p>
<p><a href=”/about.html”>About</a> –
<a href=”/policy.html”>Privacy Policy</a> –
<a href=”/contact.html”>Contact Us</a></p>
</footer>
</body>
در مثال بالا شش لینک در <header> قرار دارد که تنهای سه تای اول آن در <nav> قرار دارد ، در حالی که هر شش لینک به صفحات داخل خود آن وب سایت لینک شده اند . برای این مسئله نمی توان دلیل خاصی ذکر کرد و این به تشخیص خود توسعه دهنده است که کدام فهرست لینک های داخلی سایت را به عنوان نویگیشن در نظر بگیرد . به مثال دوم توجه کنید :
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/events”>Current Events</a></li>
…more…
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<nav>
<ul>
<li><a href=”#public”>Public demonstrations</a></li>
<li><a href=”#destroy”>Demolitions</a></li>
…more…
</ul>
</nav>
</header>
<section id=”public”>
<h1>Public demonstrations</h1>
<p>…more…</p>
</section>
<section id=”destroy”>
<h1>Demolitions</h1>
<p>…more…</p>
</section>
…more…
<footer>
<p><a href=”/?edit”>Edit</a> | <a
href=”/?delete”>Delete</a> | <a
href=”/?Rename”>Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
در این مثال به طور واضح تری مشخص شده است که بهتر است کدام فهرست لینک های سایت را به نویگیشن اصلی در نظر گرفت و داخل <nav> قرارشان داد .
کجا از تگ <nav> استفاده کنیم ؟
اگر به منبع کد اغلب صفحات وب نگاهی بیندازید ، میبینید که در اکثر آن ها از تگ <nav> در هدر سایت (برای نویگیشن منو اصلی) و در بالای فوتر سایت (برای صفحه بندی یا به اصطلاح پیجینیشن) استفاده شده است .
همچنین با نگاهی بر محتوای وب سایت ها ، جای بحث است که آیا از این تگ برای لینک های فهرست های جانبی و مطالب اخیر سایت نیز استفاده کنیم یا نه . آیا شما اینکار را می کنید ؟ در حقیقت باید گفت که لینک های موجود در فهرست های جانبی صفحات سایت و یا لینک های مطالب اخیر و … را نمی توان به عنوان نویگیشن اصلی سایت در نظر گرفت . اما ممکن است توسعه دهنده ای این فهرست ها را به عنوان نویگیشن اصلی در نظر بگیرید و بنا به تشخیص خودش آن فهرست ها را درون <nav> قرار دهد .
سایر مواردی که می توان از تگ <nav> استفاده کرد
در این قسمت نیز به چند مورد از سایر حالت هایی که می توانیم <nav> را مورد استفاده قرار دهیم اشاره خواهم کرد :
• جدول محتوا
من قطعا در این بخش از سایت از <nav> استفاده می کنم ! چون این بخش جزء نویگیشن اولیه و اصلی آن صفحه از سایت محسوب می شود .
• دکمه های قبلی / بعدی (صفحه بندی یا پیجینیشن سایت)
در این مورد هم توصیه می شود از <nav> استفاده کنید چرا که پیجینیشن
سایت در ساختار کلی و سلسله مراتب صفحات آن بسیار موثر و مهم است .
• فرم جست و جو
یک فرم جست و جو در نویگیشن سایت بسیار مهم است ، به ویژه سایت های بزرگ و حجیم که وابستگی زیادی به موتور جست و جویشان دارند .
• نویگیشن ثانویه یا به اصطلاح BreadCrumbs
در مورد این بخش از سایت نیز به طور قطع از <nav> استفاده می کنم !
با اینکه نویگیشن ثانویه یک بخش اختیاری و غیرضروری است ، اما در سایت های
بزرگ که تعداد صفحات زیادی دارند ، استفاده از BreadCrumbs می تواند یک بخش
مهم برای بهبود نویگیشن سایت برای کاربران محسوب شود .
تفاوت بین تگ های <nav> و <menu>
اگر نمی دانستید ، لازم است بگویم که در HTML5 تگ دیگری مشابه تگ <nav> وجود دارد که کمی باعث سردرگمی می شود – و آن تگ <menu> است . برخی از توسعه دهندگان برای ایجاد نویگیشن سایت از تگ <menu> به جای <nav> استفاده می کنند . بهتر است بگویم که <menu> بیشتر برای فهرستی از دستورات مناسب است و به عنوان یک المان اینتراکتیو به طور ویژه در وب اپلیکیشن ها مورد استفاده قرار می گیرد . سعی میکنم در مقاله ای دیگر به توضیح بیشتر درباره تگ <menu> نیز بپردازم .
و در آخر …
با استفاده از اطلاعاتی که از سوال و جواب های مربوط به HTML5 در فروم
های رسمی ، و همچنین با کمک گرفتن از کامیونیتی طراحان وب ، می توانید راه
کارها و راهنمایی های بیشتری درباره طرز استفاده از تگ های جدید HTML ، به
ویژه درباره تگ <nav> و ایجاد نویگیشن وب سایت که در این مقاله مورد بحث بود ، در طراحی سایت خود دریافت کنید .
به عنوان کلام آخر باید گفت که در صنعت وب همیشه باید سعی کنیم که به روز
باشیم و با استفاده از آخرین تکنولوژی های موجود کار خود را پیش ببریم .
