الفرق بين المراجعتين لصفحة: «HTML/nav»

مراجعة 04:17، 18 فبراير 2018

يُمثِّل العنصر <nav> قسمًا من الصفحة غرضه هو توفير روابط للتنقل، سواءً كانت ضمن المستند نفسه أو إلى مستندات أخرى.

من أكثر الأمثلة شيوعًا هي القوائم وجداول المحتويات والفهارس.

في هذا المثال استخدمنا العنصر <nav> لاحتواء قائمة غير مرتبة <ul> من الروابط. يمكن عرض هذه القائمة كشريط جانبي أو شريط تنقل أو قائمة منسدلة باستخدام قواعد CSS الملائمة:

<nav>
  <ul>
    <li><a href="https://mostaql.com">مستقل</a></li>
    <li><a href="https://khamsat.com">خمسات</a></li>
    <li><a href="https://academy.hsoub.com">أكاديمية حسوب</a></li>
    <li><a href="https://wiki.hsoub.com">موسوعة حسوب</a></li>
    <li><a href="https://ads.hsoub.com">إعلانات حسوب</a></li>
    <li><a href="https://io.hsoub.com">حسوب I/O</a></li>
    <li><a href="https://suar.me">صور</a></li>
  </ul>
</nav>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي.
المحتوى المسموح	محتوى تنظيمي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	`HTMLElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
5	4	مدعوم	4.1	11.10

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

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

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <nav> مع ضبط الخاصية display إلى block:

nav {
  display: block;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.

@@ سطر 5: / سطر 5: @@
 في هذا المثال استخدمنا العنصر <code><nav></code> لاحتواء قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> من الروابط. يمكن عرض هذه القائمة كشريط جانبي أو شريط تنقل أو قائمة منسدلة باستخدام قواعد CSS الملائمة:<syntaxhighlight lang="html">
-<nav class="menu">
+<nav>
    <ul>
-     <li><a href="#">Home</a></li>
+     <li><a href="https://mostaql.com">مستقل</a></li>
-     <li><a href="#">About</a></li>
+    <li><a href="https://khamsat.com">خمسات</a></li>
-     <li><a href="#">Contact</a></li>
+    <li><a href="https://academy.hsoub.com">أكاديمية حسوب</a></li>
+     <li><a href="https://wiki.hsoub.com">موسوعة حسوب</a></li>
+     <li><a href="https://ads.hsoub.com">إعلانات حسوب</a></li>
+    <li><a href="https://io.hsoub.com">حسوب I/O</a></li>
+    <li><a href="https://suar.me">صور</a></li>
    </ul>
 </nav>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 52: / سطر 58: @@
 * قد يحتوي المستند على أكثر من عنصر <code><nav></code>، فمثلًا يمكن استخدام عنصر <code><nav></code> لإضافة روابط للتنقل في الموقع، وعنصر آخر للتنقل داخل الصفحة.
 * يمكن لبرمجيات قراءة الشاشة استخدام هذا العنصر لمعرفة أين يبدأ المحتوى الفعلي للصفحة.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><nav></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
+nav {
+  display: block;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==