<main>: • المحتوى الرئيسي الفريد للصفحة • يجب أن يكون واحداً فقط في كل صفحة • لا يجب أن يحتوي: header الرئيسي، sidebar ثابت، footer • قارئات الشاشة تقفز إليه مباشرةً بـ ARIA landmark • يُساعد على Skip Navigation لذوي الاحتياجات الخاصة
<section>: • قسم من المحتوى له عنوان خاص به • يجب أن يحتوي heading (h2-h6) • استخدمه لتقسيم المحتوى المترابط في صفحة طويلة • لا تستبدل div بـ section لمجرد التنسيق — section له معنى دلالي • مناسب لـ: أقسام الصفحة الرئيسية، فصول المقالة',
| 1 | <body> |
| 2 | <header>...</header> |
| 3 | |
| 4 | <main> |
| 5 | <!-- محتوى الصفحة الرئيسي الفريد --> |
| 6 | |
| 7 | <section aria-labelledby="hero-heading"> |
| 8 | <h2 id="hero-heading">ابدأ رحلتك في البرمجة</h2> |
| 9 | <p>تعلم HTML وCSS وJavaScript مجاناً</p> |
| 10 | </section> |
| 11 | |
| 12 | <section aria-labelledby="features-heading"> |
| 13 | <h2 id="features-heading">مميزات المنصة</h2> |
| 14 | <ul> |
| 15 | <li>كورسات بالعربي</li> |
| 16 | <li>تحديات برمجية</li> |
| 17 | </ul> |
| 18 | </section> |
| 19 | |
| 20 | <section aria-labelledby="courses-heading"> |
| 21 | <h2 id="courses-heading">الكورسات المميزة</h2> |
| 22 | <!-- بطاقات الكورسات --> |
| 23 | </section> |
| 24 | </main> |
| 25 | |
| 26 | <footer>...</footer> |
| 27 | </body> |
مثال 1: صفحة رئيسية مُهيكلة
| 1 | <main id="main-content"> |
| 2 | |
| 3 | <!-- قسم الـ Hero --> |
| 4 | <section class="hero" aria-labelledby="hero-title"> |
| 5 | <h1 id="hero-title">تعلم البرمجة بالعربي</h1> |
| 6 | <p>أكثر من 100 كورس في HTML وCSS وJavaScript</p> |
| 7 | <a href="/courses" class="cta-btn">استعرض الكورسات</a> |
| 8 | </section> |
| 9 | |
| 10 | <!-- قسم الإحصائيات --> |
| 11 | <section class="stats" aria-labelledby="stats-title"> |
| 12 | <h2 id="stats-title" class="visually-hidden">إحصائياتنا</h2> |
| 13 | <ul> |
| 14 | <li><strong>50,000+</strong> طالب</li> |
| 15 | <li><strong>200+</strong> كورس</li> |
| 16 | <li><strong>4.9</strong> تقييم</li> |
| 17 | </ul> |
| 18 | </section> |
| 19 | |
| 20 | <!-- قسم الكورسات --> |
| 21 | <section class="featured-courses" aria-labelledby="courses-title"> |
| 22 | <h2 id="courses-title">الكورسات الأكثر مشاهدة</h2> |
| 23 | <div class="courses-grid"> |
| 24 | <!-- بطاقات الكورسات هنا --> |
| 25 | </div> |
| 26 | </section> |
| 27 | |
| 28 | </main> |