اچتیامال/ناوبری
| مقدمه | بندها | قلم | پیوند | تصاویر | رسانهها |
| فریم | جدولبندی | یادداشتها | تقسیمبندی (div) | فهرستبندی | رویدادها |
| سربرگ (هدر) | پابرگ (فوتر) | پیوند ناوبری | سبکها | فهرست تگها | سرمتنها |
| عنصرها |
مقدمه
[ویرایش]یکی از ارکان اصلی تجربهٔ کاربری در وبسایتها، داشتن ساختار ناوبری (Navigation) مؤثر، ساده و دسترسپذیر است. در HTML، برای ایجاد چنین ساختاری از عنصر <nav> استفاده میشود. این عنصر به موتورهای جستوجو، فناوریهای کمکی (مانند صفحهخوانها) و توسعهدهندگان کمک میکند تا قسمت ناوبری را بهدرستی شناسایی کنند.
تعریف <nav>
[ویرایش]عنصر <nav> بخشی از HTML5 است و به عنوان یک عنصر معنایی (Semantic Element) عمل میکند. این عنصر معمولاً برای نگهداری مجموعهای از لینکها استفاده میشود که کاربر را به صفحات یا بخشهای مختلف یک سایت هدایت میکنند.
مثال ساده
[ویرایش]<nav>
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/blog">وبلاگ</a></li>
<li><a href="/contact">تماس با ما</a></li>
</ul>
</nav>
بهترین شیوهها (Best Practices)
[ویرایش]۱. استفادهٔ محدود و هدفمند
[ویرایش]فقط برای بخشهایی که واقعاً نقش ناوبری دارند از <nav> استفاده کنید. لینکهایی مانند «مطالب مرتبط» یا «لینکهای پاورقی» معمولاً در <aside> یا <footer> قرار میگیرند.
۲. استفاده از ساختار لیستی
[ویرایش]همیشه لینکها را در داخل یک لیست مانند <ul> یا <ol> قرار دهید تا ساختار واضحتری ایجاد شود.
۳. رعایت دسترسپذیری
[ویرایش]- استفاده از ویژگی aria-label یا aria-labelledby برای توصیف هدف ناوبری.
- افزودن ویژگی lang برای زبان مناسب.
- ایجاد قابلیت استفاده از صفحهکلید (Keyboard Navigation-Friendly)
۴. اهمیت در سئو
[ویرایش]- موتورهای جستوجو به ساختار معنایی توجه میکنند. استفاده از <nav> باعث درک بهتر ساختار سایت توسط گوگل و سایر موتورهای جستوجو میشود.
- لینکهایی که در داخل <nav> قرار دارند، معمولاً بیشتر مورد توجه خزندهها قرار میگیرند.
نمونه ناوبری با CSS
[ویرایش]<style>
nav ul {
display: flex;
list-style: none;
background-color: #2c3e50;
padding: 0;
margin: 0;
}
nav li {
margin: 0;
}
nav a {
display: block;
color: #ecf0f1;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #34495e;
}
</style>
<nav aria-label="ناوبری اصلی">
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/services">خدمات</a></li>
<li><a href="/portfolio">نمونه کارها</a></li>
<li><a href="/contact">تماس</a></li>
</ul>
</nav>
ناوبری واکنشگرا (Responsive Navigation)
[ویرایش]برای ایجاد ناوبری واکنشگرا در موبایل، میتوان از CSS Media Query یا فریمورکهایی مانند Bootstrap استفاده کرد. نمونهای ساده از ناوبری واکنشگرا:
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background: #222;
display: flex;
flex-wrap: wrap;
}
nav li {
flex: 1 0 100%;
text-align: center;
}
nav a {
display: block;
padding: 12px;
color: #fff;
text-decoration: none;
}
@media (min-width: 600px) {
nav li {
flex: 1;
}
}
</style>
<nav aria-label="منوی اصلی">
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/news">اخبار</a></li>
<li><a href="/blog">وبلاگ</a></li>
<li><a href="/about">درباره</a></li>
</ul>
</nav>
افزودن عنوان برای صفحهخوانها
[ویرایش]برای افرادی که از صفحهخوان استفاده میکنند، میتوان با استفاده از aria-label یا یک تیتر قابل مشاهده، هدف ناوبری را مشخص کرد:
<nav aria-label="منوی اصلی سایت">
<h2 class="sr-only">ناوبری</h2>
<ul>
<li><a href="/">خانه</a></li>
<li><a href="/faq">سؤالات متداول</a></li>
</ul>
</nav>
نکته: کلاس sr-only برای پنهانسازی تیتر از دید کاربر ولی قابل خواندن برای صفحهخوانها استفاده میشود.
جمعبندی
[ویرایش]عنصر <nav> بخش حیاتی در طراحی وب مدرن است. با استفادهٔ درست از آن:
- ساختار معنایی سایت بهبود پیدا میکند.
- سئو تقویت میشود.
- دسترسپذیری برای کاربران دارای معلولیت فراهم میشود.
- تجربهٔ کاربری (UX) بهینه میگردد.