آموزش و يادگيري تگ nav در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <nav> آشنا مي‌شويم. اين تگ براي تعريف بخش ناوبري (Navigation) سايت استفاده مي‌شود و معمولاً شامل لينک‌هاي اصلي به صفحات مهم است.

تگ nav در HTML چيست؟

تگ <nav> بخش‌هايي از صفحه را مشخص مي‌کند که حاوي لينک‌هاي ناوبري هستند. استفاده از اين تگ به موتورهاي جستجو و کاربران کمک مي‌کند بخش‌هاي مهم سايت را بهتر شناسايي کنند.

مثال ساده از تگ nav

<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>

در اين مثال، تگ <nav> شامل يک ليست از لينک‌هاي اصلي سايت است که به کاربران امکان جابجايي سريع بين صفحات را مي‌دهد.

ويژگي‌هاي مهم تگ nav

مثال با استايل CSS

<style>
  nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
  }
  nav a {
    text-decoration: none;
    color: #2196f3;
    font-weight: bold;
  }
  nav a:hover {
    color: #1976d2;
  }
</style>

<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>

نکات مهم درباره nav

• تگ <nav> براي لينک‌هاي اصلي سايت استفاده مي‌شود و نه براي لينک‌هاي کوچک يا درون متن.
• استفاده از aria-label به کاربران داراي نيازهاي ويژه کمک مي‌کند.
• مي‌توان با CSS ظاهر و چيدمان منو را به دلخواه طراحي کرد.

براي يادگيري کامل ساخت ناوبري و منوهاي تعاملي در صفحات وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.