الرئيسية | HTML | CSS

HTML المتقدم: شرح section, article, aside, main مع أمثلة

بعد تعلم الأساسيات والجداول والقوائم، ننتقل الآن إلى العناصر الدلالية المتقدمة التي تساعد على تنظيم محتوى الصفحات بشكل احترافي. هذه العناصر تجعل الصفحة أكثر وضوحًا لمحركات البحث وتسهل قراءة الكود.

وسم section

وسم section يُستخدم لتقسيم الصفحة إلى أقسام منطقية. كل قسم يمكن أن يحتوي على عنوان ومحتوى خاص به.

مثال على section

<section>
  <h2>أحدث الدروس</h2>
  <p>هنا تجد آخر الدروس في HTML و CSS</p>
</section>

وسم article

وسم article يُستخدم لمحتوى مستقل مثل مقال، خبر، أو منشور مدونة. كل article يمكن أن يكون قابلاً للنشر بشكل مستقل.

مثال على article

<article>
  <h2>تعلم HTML للمبتدئين</h2>
  <p>محتوى الدرس خطوة بخطوة لتعلم HTML</p>
</article>

وسم aside

وسم aside يُستخدم للمحتوى الثانوي أو الجانبي، مثل شريط الأخبار، الإعلانات، أو معلومات إضافية. غالبًا يظهر بجانب المحتوى الرئيسي.

مثال على aside

<aside>
  <h3>مقالات ذات صلة</h3>
  <ul>
    <li>CSS للمبتدئين</li>
    <li>JavaScript خطوة بخطوة</li>
  </ul>
</aside>

وسم main

وسم main يُستخدم لتحديد المحتوى الرئيسي للصفحة. يجب أن يكون محتوى الصفحة الأكثر أهمية، ويجب أن يظهر مرة واحدة فقط.

مثال على main

<main>
  <h1>مرحبًا بكم في مدونتنا</h1>
  <p>هنا تجد كل الدروس والمقالات المهمة</p>
</main>

تنظيم الصفحة باستخدام العناصر المتقدمة

باستعمال section, article, aside, main يمكنك إنشاء صفحة منظمة:

• main: المحتوى الأساسي
• article: كل مقال أو منشور
• section: تقسيم المقالات إلى أقسام
• aside: محتوى جانبي أو ثانوي

هذا التنظيم يساعد محركات البحث (SEO) ويجعل الصفحة أكثر وضوحًا للزائر.

مصادر إضافية للتعلم

للمزيد من التفاصيل يمكنك زيارة MDN Web Docs أو W3Schools.

خلاصة

باستخدام section, article, aside, main ستتمكن من تنظيم صفحات HTML بشكل احترافي. هذا يسهل إضافة CSS لاحقًا ويجعل الموقع أكثر قابلية للقراءة والفهم.

⬅️ العودة إلى الصفحة الرئيسية