انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: العناصر الدلالية في لغة HTML

Building Site Navigation with Nav تنظيم روابط التنقل الرئيسية بالموقع

استكشف قوة العناصر الدلالية في لغة HTML واستبدل حاويات div بعناصر header و nav و main و section و article و aside و footer لتعزيز إتاحة الويب والارتقاء بترتيب الصفحة في محركات البحث.
5 صفوف تعليمية
لغة HTML
14,207 مشاهدة

شرح صفوف ومحتوى الفقرة

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

Primary Navigation Menu With Navقائمة التنقل الرئيسية باستخدام عنصر nav

إنشاء شريط تنقل دلالي يضم روابط الأقسام الرئيسية للموقع داخل وسم nav.
HTML 
<nav aria-label="Main Navigation" style="display: flex; gap: 14px; padding: 10px 14px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px;">
  <a href="/tutorials/html">HTML Track</a>
  <a href="/tutorials/css">CSS Track</a>
  <a href="/questions">Coding Challenges</a>
</nav>
جرّب بنفسك
الصف 4 معاينة حية

Semantic Nav Element Browser Previewمعاينة قائمة التنقل الدلالية nav

عرض متصفح لشريط التنقل الرئيسي المعرّف دلالياً لقارئات الشاشة.
الصف 5 ملاحظة هامة

جميع فقرات هذا الدرس (العناصر الدلالية في لغة HTML)