العودة إلى الدورة

الدرس 28: تقطيع المحتوى (`<section>`, `<article>`, `<aside>`)

الدورة الاحترافية في HTML: من الصفر إلى مطور ويب

28. تقطيع المحتوى

تقسم هذه العناصر المحتوى الرئيسي إلى وحدات منطقية ومكتفية ذاتياً.

28.1 عنصر <section>

يستخدم لتجميع المحتوى ذي الصلة. يجب أن يرتبط دائماً بعنوان (h1 - h6) يصف موضوع القسم.

html

<main> <section> <h2>مخطط الدورة</h2> <p>تفاصيل حول الوحدات النمطية...</p> </section> 
<section>
    <h2>المتطلبات الأساسية</h2>
    <p>ما تحتاج إلى معرفته قبل البدء...</p>
</section>
</main>

28.2 عنصر <article>

يستخدم للمحتوى المكتفي ذاتياً والقابل للتوزيع أو إعادة الاستخدام بشكل مستقل، مثل منشور مدونة، أو مقال صحفي، أو منشور منتدى، أو تعليق مقدم من المستخدم.

html

<main> <article> <h3>منشور مدونتي الأول</h3> <p>نشر في 10/01/2024</p> <p>محتوى المنشور...</p> </article> 
<article>
    <h3>منشور مدونة آخر</h3>
    <p>نشر في 10/05/2024</p>
    <p>مزيد من المحتوى هنا...</p>
</article>
</main>

28.3 عنصر <aside>

المحتوى المرتبط بشكل عرضي بالمحتوى المحيط به (على سبيل المثال، الأشرطة الجانبية، الاقتباسات الجانبية، كتل الإعلانات).

html

<main> <article>...</article> <aside> <h4>مقالات ذات صلة</h4> <ul><li>...</li></ul> </aside> </main>