nav: وقتی می‌خوای به مرورگر بگی «این بخش منوئه»
تا اینجای این فصل، کلی درباره‌ی تگ a و انواع لینک‌ها صحبت کردیم. حالا وقتشه ببینیم وقتی چند تا لینک رو کنار هم به‌عنوان یه منوی ناوبری می‌ذاریم، بهتره از چه ساختاری استفاده کنیم. اینجاست که تگ معنایی nav وارد می‌شه؛ یکی از تگ‌های مهم HTML5 که تو فصل ۸ کامل‌تر با خانواده‌ی تگ‌های معنایی آشنا می‌شیم، اما چون مستقیم به بحث لینک‌ها مربوطه، همین‌جا باهاش شروع می‌کنیم.
nav چیه؟
تگ nav برای بسته‌بندی بخش‌هایی از صفحه استفاده می‌شه که شامل مجموعه‌ای از لینک‌های ناوبری اصلی هستن؛ یعنی لینک‌هایی که کاربر رو بین بخش‌های مختلف سایت یا صفحه هدایت می‌کنن، مثل منوی اصلی بالای سایت.
<nav>
<a href="/">خانه</a>
<a href="/about">درباره ما</a>
<a href="/services">خدمات</a>
<a href="/contact">تماس با ما</a>
</nav>چرا نباید فقط از div استفاده کنیم؟
همون‌طور که تو درس ۱-۲ اشاره کردیم، تو HTML قدیمی معمولاً برای همچین منویی از یه div ساده استفاده می‌شد:
<!-- روش قدیمی -->
<div class="nav">
<a href="/">خانه</a>
<a href="/about">درباره ما</a>
</div>مشکل اینجاست که div از نظر معنایی کاملاً خنثیه؛ مرورگر، گوگل و صفحه‌خوان هیچ اطلاعاتی از این div به‌دست نمیارن جز اینکه یه ظرف عمومیه. اما وقتی از nav استفاده می‌کنی:
<!-- روش HTML5 -->
<nav>
<a href="/">خانه</a>
<a href="/about">درباره ما</a>
</nav>مرورگر و صفحه‌خوان دقیقاً می‌فهمن این بخش، بخش ناوبری اصلیه. این تفاوت از نظر بصری کاملاً نامحسوسه (هر دو کد ممکنه دقیقاً یه شکل نمایش داده بشن)، اما از نظر معنایی و ساختاری خیلی مهمه.
ساخت منو با لیست‌ها: روش استاندارد و توصیه‌شده
اگرچه می‌شه لینک‌ها رو مستقیم داخل nav نوشت (مثل مثال بالا)، اما روش رایج‌تر و توصیه‌شده‌تر اینه که لینک‌های منو رو داخل یه لیست نامرتب (ul) بذاریم:
<nav>
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/services">خدمات</a></li>
<li><a href="/contact">تماس با ما</a></li>
</ul>
</nav>دلیل این توصیه اینه که یه منو، از نظر ماهیت محتوایی، دقیقاً یه فهرسته؛ یعنی یه مجموعه از آیتم‌های مشابه (لینک‌ها) که کنار هم قرار گرفتن. استفاده از ul و li این ماهیت فهرستی رو به‌درستی به مرورگر و صفحه‌خوان منتقل می‌کنه، و معمولاً با CSS، ظاهر بولت‌های پیش‌فرض لیست حذف می‌شه تا شبیه یه منوی افقی یا عمودی معمولی دیده بشه.
می‌شه چند تا nav تو یک صفحه داشت؟
<nav>
<!-- منوی اصلی بالای سایت -->
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/blog">وبلاگ</a></li>
</ul>
</nav>
<nav>
<!-- منوی فوتر -->
<ul>
<li><a href="/privacy">حریم خصوصی</a></li>
<li><a href="/terms">قوانین و مقررات</a></li>
</ul>
</nav>بله، کاملاً مجازه. خیلی از سایت‌ها هم یه nav برای منوی اصلی بالای صفحه دارن، هم یه nav جدا برای لینک‌های فوتر (مثل حریم خصوصی، قوانین). هر بخشی که واقعاً یه مجموعه لینک ناوبری مستقله، می‌تونه تو یه nav جدا قرار بگیره.
مهم: nav فقط برای مهم‌ترین لینک‌های ناوبری
یه نکته‌ی مهم اینه که nav نباید برای هر مجموعه لینکی تو صفحه استفاده بشه؛ فقط برای بلوک‌های ناوبری اصلی و مهم مناسبه. مثلاً چند تا لینک ساده که وسط یه پاراگراف به مقالات مرتبط اشاره می‌کنن، لازم نیست حتماً داخل nav بسته‌بندی بشن:
<!-- نیازی به nav نیست -->
<p>
برای اطلاعات بیشتر، مقاله‌ی
<a href="/article1">آموزش CSS</a>
را هم مطالعه کنید.
</p>این یه لینک درون‌متنی سادگه، نه یه بلوک ناوبری مستقل؛ پس نیازی به nav نداره.
یه مثال کامل از ساختار صفحه با nav
<body>
<header>
<h1>فروشگاه کتاب پارسی</h1>
<nav>
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/books">کتاب‌ها</a></li>
<li><a href="/contact">تماس با ما</a></li>
</ul>
</nav>
</header>
<p>به فروشگاه ما خوش آمدید.</p>
</body>تو این مثال، nav داخل header قرار گرفته، که یه ترکیب خیلی رایج تو سایت‌های امروزیه. تگ header رو کامل تو فصل ۸ بررسی می‌کنیم.
چند اشتباه رایج
- استفاده از div به‌جای nav برای منوهای اصلی سایت، که فرصت انتقال معنای ساختاری رو از دست می‌ده.
- استفاده از nav برای هر مجموعه لینک کوچیکی تو صفحه، حتی وقتی اون لینک‌ها فقط یه ارجاع درون‌متنی ساده‌ن.
- ننوشتن لینک‌های منو داخل ساختار لیست (ul و li)، در حالی که این ساختار هم از نظر معنایی مناسب‌تره، هم استایل‌دهی باهاش راحت‌تره.
بهترین روش‌ها
- برای منوهای اصلی سایت (بالای صفحه، فوتر، منوی کناری)، همیشه از nav استفاده کن.
- لینک‌های داخل nav رو داخل یه ساختار ul و li بذار.
- nav رو فقط برای بلوک‌های ناوبری واقعاً مهم استفاده کن، نه برای هر لینک پراکنده‌ای تو متن.
نکته‌ی سئو
استفاده از nav به موتورهای جستجو کمک می‌کند ساختار ناوبری اصلی سایت را سریع‌تر و دقیق‌تر شناسایی کنند، که می‌تواند در نحوه‌ی نمایش لینک‌های سایت (مثل Sitelinks در نتایج جستجوی گوگل) هم تأثیرگذار باشد.
نکته‌ی دسترسی‌پذیری
کاربران صفحه‌خوان می‌توانند مستقیماً بین بخش‌های nav یک صفحه جابه‌جا شوند و به‌سرعت به منوی اصلی دسترسی پیدا کنند، بدون نیاز به گوش‌دادن به کل محتوای صفحه؛ این قابلیت فقط زمانی به‌درستی کار می‌کند که از تگ استاندارد nav استفاده شده باشد، نه یک div ساده.
جمع‌بندی
تگ nav برای بسته‌بندی بلوک‌های اصلی ناوبری سایت استفاده می‌شود و معمولاً همراه با ساختار ul و li برای لینک‌های منو به کار می‌رود. این تگ معنای ساختاری مهمی به مرورگر، موتورهای جستجو و صفحه‌خوان‌ها منتقل می‌کند و باید فقط برای بلوک‌های ناوبری مهم استفاده شود، نه هر مجموعه لینک ساده‌ای در متن.