📌 العناصر الهيكلية (Semantic Elements)

🔹 أولًا: ما الفرق بين العناصر العادية (Non-Semantic) والعناصر الدلالية (Semantic)؟

✅ العناصر العادية (Non-Semantic Elements)

• زي <div> و <span>

• ما لهاش معنى محدد بخصوص المحتوى، هي مجرد حاويات عامة.

• بتُستخدم عشان تجمع أو تنسّق عناصر.

• ما بتقولش لمحرك البحث أو قارئ الشاشة إيه نوع المحتوى جواها.

مثال:

✅ العناصر الدلالية (Semantic Elements)

• عناصر تم تصميمها مخصوص لتوضح معنى المحتوى اللي بداخلها.

• بتخلي الكود أكثر وضوحًا وتنظيمًا، وسهل لمحركات البحث (SEO) وأدوات المساعدة زي قارئات الشاشة.

• أمثلة: <header>, <footer>, <article>, <nav> … إلخ.

مثال:

🔹 أهم العناصر الدلالية في HTML5

1. <header>

• يمثل رأس الصفحة أو رأس قسم معين.

• عادة يحتوي على: شعار الموقع، عنوان رئيسي، أو روابط تنقل (Navigation).

✅ مثال:

2. <nav>

• يمثل قسم خاص بروابط التنقل داخل الموقع.

• بيستخدم عادة للقوائم الرئيسية أو روابط الأقسام المهمة.

✅ مثال:

• يمثل قسم في الصفحة له موضوع محدد.

• ممكن يحتوي على عناوين، فقرات، صور، أو مقالات.

✅ مثال:

4. <article>

• يمثل محتوى مستقل يمكن قراءته بمفرده (زي مقال، خبر، منشور مدونة).

• يصلح لإعادة النشر أو المشاركة بشكل مستقل عن باقي الصفحة.

✅ مثال:

• يمثل محتوى جانبي (Sidebar).

• غالبًا بيحتوي على إعلانات، روابط إضافية، أو مقالات ذات صلة.

✅ مثال:

6. <footer>

• يمثل تذييل الصفحة أو تذييل قسم.

• غالبًا يحتوي على: حقوق النشر، روابط التواصل، أو معلومات إضافية.

✅ مثال:

7. <main>

• يمثل المحتوى الرئيسي للصفحة.

• لازم يكون فريد (واحد بس في الصفحة).

• ما يحتويش على عناصر متكررة زي <header>, <footer>, <nav>.

✅ مثال:

8. <figure> و <figcaption>

• <figure>: يمثل عنصر وسائط (صورة، رسم بياني، كود …).

• <figcaption>: يضيف وصف أو تعليق لهذه الوسائط.

✅ مثال:

🔹 مثال عملي شامل

🔹 ملخص

• العناصر العادية (div, span) = مجرد حاويات بلا معنى.

• العناصر الدلالية (Semantic) = بتوضح نوع المحتوى لمحركات البحث والمستخدمين.

• أهمها:

  • <header> → رأس الصفحة/القسم.

  • <nav> → روابط التنقل.

  • <section> → قسم رئيسي.

  • <article> → مقالة أو محتوى مستقل.

  • <aside> → محتوى جانبي.

  • <footer> → التذييل.

  • <main> → المحتوى الأساسي.

  • <figure> + <figcaption> → الصور والوسائط مع شرح.