Part 10 شرح عناصر هيكلة الصفحة Semantic Elements في HTML #برمجة #FSWD #HTML

🔸 أولًا: الفرق بين العناصر الدلالية (Semantic Elements) والعناصر العادية

العناصر الدلالية هي العناصر التي تحمل معنى وظيفي واضح داخل صفحة الويب، وبتساعد في تحسين تجربة المستخدم وتحسين محركات البحث (SEO). العناصر الدلالية تجعل الصفحة أكثر قابلة للفهم من قبل المتصفحات ومحركات البحث، بحيث تكون الصفحة مُنظَّمة بطريقة منطقية.

أما العناصر العادية فهي العناصر التي لا تحمل معنى وظيفي أو دلالي معين، مثل <div> و<span>. هذه العناصر تُستخدم فقط للهيكلة (أي ترتيب المحتوى) ولكن لا تحمل دلالة واضحة على محتواها.

مثال على الفرق بين العناصر الدلالية والعناصر العادية:

• العناصر الدلالية: <header>, <nav>, <main>, <footer>, <article>, <section>

• العناصر العادية: <div>, <span>

أهم العناصر الدلالية:

🔹 1. <header>:

• يُستخدم لتحديد الجزء العلوي من الصفحة أو القسم، ويحتوي عادةً على الشعار، العنوان، القائمة الرئيسية أو أي عناصر مهمة في بداية الصفحة.

✅ مثال

<header>
  <h1>مرحبا بك في موقعي</h1>
  <nav>
    <ul>
      <li><a href="#">الرئيسية</a></li>
      <li><a href="#">عن الموقع</a></li>
      <li><a href="#">اتصل بنا</a></li>
    </ul>
  </nav>
</header>

في المثال: تم استخدام <header> لتحديد العنوان الرئيسي للموقع والقائمة الرئيسية

2. <nav>:

• يُستخدم لتحديد القوائم الخاصة بالتنقل في الصفحة (مثل القوائم الرئيسية أو الروابط الخاصة بالتنقل بين الصفحات).

✅ مثال

<nav>
  <ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">خدماتنا</a></li>
    <li><a href="#">مقالات</a></li>
  </ul>
</nav>

في المثال: تم استخدام <nav> لاحتواء روابط التنقل في الموقع

3. <main>:

• يُستخدم لتحديد الجزء الرئيسي في الصفحة. هذا الجزء يحتوي على المحتوى الرئيسي الذي يتغير من صفحة إلى أخرى، مثل المقالات أو العروض التقديمية.

✅ مثال

<main>
  <h2>أحدث المقالات</h2>
  <p>هذه هي المقالة الأولى في السلسلة...</p>
</main>

في المثال: تم استخدام <main> لاحتواء المقالات التي تعد جزءًا من المحتوى الرئيسي للصفحة

4. <section>:

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

✅ مثال

<section>
  <h2>أحدث الأخبار</h2>
  <p>نحن نعمل على تحسين الأداء...</p>
</section>

في المثال: تم استخدام <section> لتقسيم الصفحة إلى قسم يحتوي على الأخبار.

5. <article>:

• يُستخدم لتعريف محتوى مستقل في الصفحة، مثل مقال، أو مدونة، أو منشور.

✅ مثال

<article>
  <h2>عنوان المقالة</h2>
  <p>محتوى المقالة هنا...</p>
</article>

في المثال: تم استخدام <article> لاحتواء مقال معين

6. <aside>:

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

✅ مثال

<aside>
  <h3>إعلان</h3>
  <p>احصل على خصم 20% على جميع المنتجات.</p>
</aside>

في المثال: تم استخدام <aside> لعرض إعلان جانبي

7. <footer>:

• يُستخدم لتحديد الجزء السفلي من الصفحة، والذي يحتوي عادة على حقوق الملكية، معلومات الاتصال، روابط التواصل الاجتماعي، أو أي معلومات أخرى غير أساسية.

✅ مثال

<footer>
  <p>&copy; 2025 جميع الحقوق محفوظة</p>
  <p>تابعنا على <a href="#">فيسبوك</a> و <a href="#">تويتر</a></p>
</footer>

في المثال: تم استخدام <footer> لعرض معلومات حقوق الملكية وروابط الشبكات الاجتماعية

فيديو مثال كامل باستخدام جميع العناصر الدلالية

💡 ملخص العناصر الدلالية: