وثائق HTML قابلة للتشغيل: وسم nav

Q: هل يجب أن تكون الروابط داخل nav في قائمة؟

هذا هو النمط الشائع وهو نمط جيد: قائمة من عناصر تتيح لقارئات الشاشة إعلان عدد الروابط في القائمة. والروابط العادية مباشرة داخل صالحة أيضًا، مثلًا لرابطين أو ثلاثة في صف.

Q: هل تحتاج كل مجموعة روابط إلى عنصر nav؟

لا. استخدم لمجموعات التنقل الرئيسية فقط. بضعة روابط في فقرة أو قائمة قصيرة من الروابط القانونية في التذييل لا تحتاج إليه، وكثرة معالم التنقل تجعل إيجاد كل منها أصعب.

Q: كيف أصنع شريط تنقل أفقيًا؟

ضع الروابط في داخل ، ثم أعطِ القائمة display: flex; list-style: none; padding: 0; وgap. يرتّب flexbox العناصر في صف.

Q: كيف أُظهر الصفحة الحالية في شريط التنقل؟

أضف aria-current="page" إلى رابط الصفحة التي يوجد فيها المستخدم، ونسّقه بالمحدد [aria-current="page"]. عندها تعلن قارئات الشاشة أنها الصفحة الحالية أيضًا.

شريط تنقل باستخدام nav

أحط قائمتك بـ <nav> وضع الروابط في قائمة. يحوّل flexbox القائمة إلى شريط أفقي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none وpadding: 0 تزيلان النقاط والإزاحة. وdisplay: block على كل رابط تتيح لحشوه أن يشغل مساحة حقيقية في الشريط، فيصبح الصندوق كله بحشوه هدفًا للنقر. احذف سطر display: flex وستصبح القائمة نفسها قائمة عمودية، وهذا شكل قائمة الشريط الجانبي.

<nav> نفسه لا مظهر له. وظيفته المعنى: تعرضه قارئات الشاشة كـ معلم تنقل، فيستطيع المستخدم القفز إلى القائمة، أو تجاوزها، بمفتاح واحد.

تمييز الصفحة الحالية

أضف aria-current="page" إلى رابط الصفحة المعروضة. تقول لقارئات الشاشة «أنت هنا»، وتعطي CSS نقطة ارتكاز لإبراز الرابط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

انقل aria-current="page" إلى رابط آخر وسينتقل الإبراز معه. تنسيق السمة بدلًا من فئة .active يُبقي المظهر وإمكانية الوصول متزامنين: لا يمكن أن يوجد أحدهما دون الآخر.

عدة عناصر nav في صفحة واحدة: التسميات ومسار التنقل

يمكن أن يكون في الصفحة قائمة رئيسية ومسار تنقل وفهرس محتويات، كل منها في <nav> خاص. أعطِ كلًا منها aria-label، فيعلن قارئ الشاشة «Breadcrumb navigation» بدلًا من ثلاثة إدخالات «navigation» متطابقة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

يستخدم مسار التنقل قائمة مرتبة <ol> لأن الترتيب مهم. والشرطات المائلة تأتي من ::before في CSS، فلا تقرأ قارئات الشاشة «شرطة مائلة» بين كل عنصرين. العنصر الأخير هو الصفحة الحالية وليس رابطًا.

فهرس المحتويات

قائمة روابط إلى أقسام الصفحة نفسها تنقلٌ أيضًا. روابط #id تنتقل إلى العنصر الذي يحمل ذلك المعرّف، جرّبها في المعاينة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

هنا تأتي التسمية من عنوان ظاهر عبر aria-labelledby، وهذا أفضل من aria-label حين يكون العنوان موجودًا أصلًا على الشاشة.

زر قائمة الجوال

على الشاشات الضيقة تختبئ القوائم عادةً خلف زر. استخدم <button> حقيقيًا مع aria-expanded، وأبقِ الروابط داخل <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded تخبر قارئ الشاشة إن كانت القائمة مفتوحة، والسمة hidden تزيل القائمة من الشاشة ومن شجرة إمكانية الوصول معًا ما دامت مغلقة. وعلى الشاشات العريضة تُظهر القائمة باستعلام وسائط وتخفي الزر.

أخطاء شائعة

إحاطة كل مجموعة روابط بـ <nav>. استخدمه للقائمة الرئيسية ومسار التنقل وترقيم الصفحات وفهارس المحتويات. الروابط داخل النص ليست مجموعات تنقل.
زر قائمة مصنوع من <div>. لا يمكن التركيز عليه أو ضغطه بلوحة المفاتيح. استخدم <button>.
عدة عناصر nav بلا تسميات. أضف aria-label أو aria-labelledby لكل منها كي يمكن التمييز بينها.
الاكتفاء بتلوين الرابط الحالي. أضف aria-current="page"، فاللون وحده لا يُعلن وقد لا يراه الجميع.
روابط href="#" في بيئة الإنتاج. مقبولة في عرض تجريبي، لكن عناصر القائمة الحقيقية تحتاج إلى عناوين حقيقية كي تعمل عند فتحها في تبويب جديد. تشرح صفحة الروابط كيف تعمل قيم href.

الأسئلة الشائعة

ما هو وسم nav في HTML؟

<nav> عنصر دلالي يحيط بمجموعة من روابط التنقل الرئيسية، مثل قائمة الموقع أو فهرس المحتويات أو مسار التنقل. تسرده قارئات الشاشة كمعلم تنقل كي يستطيع المستخدمون القفز إليه مباشرة.

هل يجب أن تكون الروابط داخل nav في قائمة؟

هذا هو النمط الشائع وهو نمط جيد: قائمة <ul> من عناصر <li> تتيح لقارئات الشاشة إعلان عدد الروابط في القائمة. والروابط العادية مباشرة داخل <nav> صالحة أيضًا، مثلًا لرابطين أو ثلاثة في صف.

هل تحتاج كل مجموعة روابط إلى عنصر nav؟

لا. استخدم <nav> لمجموعات التنقل الرئيسية فقط. بضعة روابط في فقرة أو قائمة قصيرة من الروابط القانونية في التذييل لا تحتاج إليه، وكثرة معالم التنقل تجعل إيجاد كل منها أصعب.

كيف أصنع شريط تنقل أفقيًا؟

ضع الروابط في <ul> داخل <nav>، ثم أعطِ القائمة display: flex; list-style: none; padding: 0; وgap. يرتّب flexbox العناصر في صف.

كيف أُظهر الصفحة الحالية في شريط التنقل؟

أضف aria-current="page" إلى رابط الصفحة التي يوجد فيها المستخدم، ونسّقه بالمحدد [aria-current="page"]. عندها تعلن قارئات الشاشة أنها الصفحة الحالية أيضًا.

هل يمكن أن يكون في الصفحة أكثر من nav؟

نعم، مثل قائمة رئيسية ومسار تنقل وفهرس محتويات. أعطِ كلًا منها aria-label مختلفة مثل "Main" أو "Breadcrumb" كي يميّز مستخدمو قارئات الشاشة بينها.

مفاهيم ذات صلة