یکی از عناصر مهم و پرکاربرد در HTML برای ایجاد ساختار معنایی و دسترسپذیری بهتر، تگ <nav> است. این عنصر مخصوص مجموعهای از لینکهاست که کاربر را بین صفحات اصلی یک وبسایت هدایت میکنند.
🚀 تگ <nav> چیست؟
- مخفف navigation
- برای قرار دادن بلوک اصلی لینکهای ناوبری استفاده میشود
- معمولاً در بخش header یا footer سایت قرار میگیرد
🧪 تمرین عملی: ایجاد منوی ناوبری
قدم اول: اضافه کردن <nav> داخل هدر
<header>
<h1>عنوان سایت</h1>
<p>شعار سایت</p>
<nav>
<!-- لینکهای ناوبری اینجا قرار میگیرند -->
</nav>
</header>
قدم دوم: ساختار استاندارد لینکها
- استفاده از
<ul>برای لیست نامرتب - هر لینک داخل یک
<li>قرار میگیرد - لینک اصلی با
<a>ساخته میشود
<nav>
<ul>
<li><a href="index.html">خانه</a></li>
<li><a href="about.html">درباره ما</a></li>
<li><a href="contact.html">تماس با ما</a></li>
</ul>
</nav>
📌 این لینکها باید دقیقاً به نام فایلهای موجود در پروژه اشاره کنند (index.html، about.html، contact.html).
قدم سوم: تست در مرورگر
- فایل را ذخیره کنید و مرورگر را رفرش کنید.
- منوی ناوبری در بخش header نمایش داده میشود.
- با کلیک روی لینکها، کاربر به صفحات مربوطه هدایت میشود.
قدم چهارم: افزودن ناوبری به همه صفحات
- اگر فقط در index.html کد nav را قرار دهید، در صفحات دیگر دیده نمیشود.
- باید همان کد را داخل
<header>فایلهای about.html و contact.html هم اضافه کنید.
مثال در about.html:
<header>
<h1>درباره ما</h1>
<nav>
<ul>
<li><a href="index.html">خانه</a></li>
<li><a href="about.html">درباره ما</a></li>
<li><a href="contact.html">تماس با ما</a></li>
</ul>
</nav>
</header>
⚠️ نکته مهم
- همهی لینکها لازم نیست داخل
<nav>باشند. - لینکهای داخل مقاله یا منابع خارجی معمولاً خارج از nav قرار میگیرند.
- لینکهای کماهمیت در footer (مثل قوانین استفاده یا حریم خصوصی) معمولاً در nav قرار نمیگیرند.
🎯 جمعبندی
<nav>مخصوص مجموعه لینکهای ناوبری است.- ساختار استاندارد آن:
<ul>→<li>→<a>. - باید در همهی صفحات اصلی سایت تکرار شود تا ناوبری یکپارچه داشته باشیم.
- استفاده از nav باعث:
- افزایش دسترسپذیری
- تقویت ساختار معنایی (semantic structure)