<header>: • يحدد مقدمة محتوى — إما للصفحة كلها أو لـ article/section • يمكن أن يحتوي: شعار، عنوان رئيسي، nav، بيانات تعريفية • يمكن استخدامه أكثر من مرة في الصفحة (مثال: header للـ article) • لا يجب ظهوره داخل footer أو address أو header آخر
<nav>: • يحدد قسم تنقل رئيسي فقط — ليس كل مجموعة روابط • يستخدم للـ: navigation bar، قائمة التنقل، روابط الصفحات • لا يستخدم للـ: روابط في paragraph، footer links عادية، social icons • أضف aria-label لتمييز أكثر من nav في الصفحة • المحتوى المثالي: ul + li + a للتنقل النصي',
| 1 | <!-- header الصفحة الرئيسي --> |
| 2 | <header> |
| 3 | <a href="/" class="logo"> |
| 4 | <img src="/logo.svg" alt="شعار الموقع"> |
| 5 | </a> |
| 6 | |
| 7 | <nav aria-label="التنقل الرئيسي"> |
| 8 | <ul> |
| 9 | <li><a href="/">الرئيسية</a></li> |
| 10 | <li><a href="/courses">الكورسات</a></li> |
| 11 | <li><a href="/articles">المقالات</a></li> |
| 12 | <li><a href="/contact">تواصل معنا</a></li> |
| 13 | </ul> |
| 14 | </nav> |
| 15 | </header> |
| 16 | |
| 17 | <!-- header داخل article --> |
| 18 | <article> |
| 19 | <header> |
| 20 | <h2>عنوان المقالة</h2> |
| 21 | <time datetime="2024-06-15">15 يونيو 2024</time> |
| 22 | <address>بقلم <a href="/author/ahmed">أحمد محمد</a></address> |
| 23 | </header> |
| 24 | <p>محتوى المقالة...</p> |
| 25 | </article> |
| 26 | |
| 27 | <!-- nav ثانوي: pagination --> |
| 28 | <nav aria-label="الصفحات"> |
| 29 | <a href="?page=1">1</a> |
| 30 | <a href="?page=2" aria-current="page">2</a> |
| 31 | <a href="?page=3">3</a> |
| 32 | </nav> |
مثال 1: header موقع كامل
| 1 | <header role="banner"> |
| 2 | <div class="header-inner"> |
| 3 | <!-- الشعار --> |
| 4 | <a href="/" class="brand" aria-label="نوفيل - الرئيسية"> |
| 5 | <img src="/logo.svg" alt="نوفيل" width="120" height="40"> |
| 6 | </a> |
| 7 | |
| 8 | <!-- التنقل الرئيسي --> |
| 9 | <nav aria-label="التنقل الرئيسي"> |
| 10 | <ul> |
| 11 | <li><a href="/courses" aria-current="page">الكورسات</a></li> |
| 12 | <li><a href="/challenges">التحديات</a></li> |
| 13 | <li><a href="/articles">المقالات</a></li> |
| 14 | </ul> |
| 15 | </nav> |
| 16 | |
| 17 | <!-- إجراءات المستخدم --> |
| 18 | <div class="header-actions"> |
| 19 | <a href="/login">تسجيل الدخول</a> |
| 20 | <a href="/register" class="btn-primary">ابدأ مجاناً</a> |
| 21 | </div> |
| 22 | </div> |
| 23 | </header> |