<article>: • محتوى مستقل قائم بذاته — يمكن توزيعه أو مشاركته بدون سياق الصفحة • أمثلة: مقالة مدونة، منشور forum، بطاقة منتج، تغريدة، مقطع فيديو • يمكن تداخل article داخل article (مقالة بداخلها تعليقات كـ articles) • يجب أن يحتوي heading عادةً
<aside>: • محتوى مرتبط بالسياق المحيط لكنه ثانوي • في سياق main: sidebar (شريط جانبي) • في سياق article: تعليقات ذات صلة، تعريفات، إعلانات • ليس كل شيء جانبي يستحق aside — فقط المرتبط بالمحتوى الرئيسي
| 1 | <main> |
| 2 | <!-- المقالة الرئيسية --> |
| 3 | <article> |
| 4 | <header> |
| 5 | <h1>كيف تتعلم HTML بفعالية؟</h1> |
| 6 | <time datetime="2024-06-15">15 يونيو 2024</time> |
| 7 | </header> |
| 8 | |
| 9 | <p>محتوى المقالة الرئيسي...</p> |
| 10 | |
| 11 | <!-- تعليقات كـ articles متداخلة --> |
| 12 | <section aria-label="التعليقات"> |
| 13 | <article> |
| 14 | <header> |
| 15 | <h3>تعليق من: محمد</h3> |
| 16 | <time datetime="2024-06-16">16 يونيو</time> |
| 17 | </header> |
| 18 | <p>مقالة رائعة، شكراً!</p> |
| 19 | </article> |
| 20 | </section> |
| 21 | </article> |
| 22 | |
| 23 | <!-- الشريط الجانبي --> |
| 24 | <aside aria-label="محتوى ذو صلة"> |
| 25 | <h2>مقالات مشابهة</h2> |
| 26 | <ul> |
| 27 | <li><a href="/css-basics">أساسيات CSS</a></li> |
| 28 | <li><a href="/js-intro">مقدمة JavaScript</a></li> |
| 29 | </ul> |
| 30 | |
| 31 | <section> |
| 32 | <h2>نشرة بريدية</h2> |
| 33 | <p>اشترك لتلقي آخر المقالات</p> |
| 34 | <form> |
| 35 | <input type="email" placeholder="بريدك الإلكتروني"> |
| 36 | <button type="submit">اشتراك</button> |
| 37 | </form> |
| 38 | </section> |
| 39 | </aside> |
| 40 | </main> |
مثال 1: تخطيط مدونة كامل
| 1 | <main class="blog-layout"> |
| 2 | |
| 3 | <!-- المحتوى الرئيسي --> |
| 4 | <div class="content-area"> |
| 5 | <article class="blog-post"> |
| 6 | <header> |
| 7 | <h1>HTML5 — كل ما تحتاج معرفته</h1> |
| 8 | <div class="meta"> |
| 9 | <address>بقلم <a rel="author" href="/ahmed">أحمد</a></address> |
| 10 | <time datetime="2024-06-15">15 يونيو 2024</time> |
| 11 | <span>⏱ 8 دقائق قراءة</span> |
| 12 | </div> |
| 13 | </header> |
| 14 | |
| 15 | <p>محتوى المقالة الشامل...</p> |
| 16 | |
| 17 | <footer> |
| 18 | <p>التصنيفات: <a href="/html">HTML</a>, <a href="/webdev">تطوير الويب</a></p> |
| 19 | </footer> |
| 20 | </article> |
| 21 | </div> |
| 22 | |
| 23 | <!-- الشريط الجانبي --> |
| 24 | <aside class="sidebar"> |
| 25 | <section class="widget"> |
| 26 | <h2>عن الكاتب</h2> |
| 27 | <p>أحمد — مطور ويب بخبرة 5 سنوات...</p> |
| 28 | </section> |
| 29 | |
| 30 | <section class="widget"> |
| 31 | <h2>الأكثر قراءة</h2> |
| 32 | <ol> |
| 33 | <li><a href="#">تعلم CSS Grid</a></li> |
| 34 | <li><a href="#">Flexbox للمبتدئين</a></li> |
| 35 | </ol> |
| 36 | </section> |
| 37 | </aside> |
| 38 | |
| 39 | </main> |