The Code Fix
...ابدأ مجانًا

🟧 شرح HTML

HTML الدلالي (Semantic HTML)

❯ السابقالتالي ❮

ما هو HTML الدلالي؟

كلمة Semantic تعني "دلالي" أو "ذو معنى". وHTML الدلالي هو ببساطة: أن تستخدم العنصر (Tag) الذي يصف معنى المحتوى بداخله، لا مجرد عنصر فارغ من المعنى.

الكودان التاليان يظهران بنفس الشكل تمامًا للمستخدم، لكنهما مختلفان جوهريًا:

<!-- غير دلالي (Non-semantic) -->
<div class="header">
  <div class="nav">القائمة</div>
</div>

<!-- دلالي (Semantic) -->
<header>
  <nav>القائمة</nav>
</header>

في المثال الأول، عنصر <div> لا يقول للمتصفح أي شيء — مجرّد "صندوق". أما <header> فيخبر المتصفح وقارئات الشاشة ومحركات البحث: "هذا رأس الصفحة"، و<nav> يقول: "هذه قائمة تنقّل".

🔑 القاعدة الذهبية: العنصران <div> و<span> بلا معنى دلالي — استخدمهما فقط حين لا يوجد عنصر دلالي مناسب.

لماذا نستخدم HTML الدلالي؟ (الأهم)

قد تتساءل: "ما دام الشكل واحدًا، فلماذا أتعب نفسي؟" الجواب في ثلاثة جمهور لا تراهم:

1. إمكانية الوصول (Accessibility / a11y)

المستخدمون ذوو الإعاقة البصرية يتصفّحون بـ قارئات الشاشة (Screen Readers)، التي تبني خريطة للصفحة تُسمّى Landmarks (المعالم). يستطيع المستخدم القفز مباشرة إلى <main> أو تصفّح كل قوائم <nav>. مع <div> فقط، يضيع هذا المستخدم تمامًا.

2. تحسين محركات البحث (SEO)

Googlebot لا "يرى" صفحتك بصريًا — بل يقرأ الكود. حين يجد <article> يفهم أنه محتوى رئيسي مستقل، و<nav> يفهمها روابط تنقّل. هذا يساعده على فهم بنية صفحتك وأهمية أجزائها، فيحسّن ترتيبك.

3. قابلية القراءة والصيانة

أي كود أسهل فهمًا بعد ستة أشهر؟ صفحة مليئة بـ <div> متداخلة، أم صفحة فيها <header> و<main> و<footer> واضحة؟ الكود الدلالي يوثّق نفسه بنفسه.

كيف يقرأ المتصفح العناصر؟

عند تحميل الصفحة، يبني المتصفح شجرة إمكانية الوصول (Accessibility Tree)، ويترجم كل عنصر دلالي إلى Role (دور):

  • <nav> ← دوره navigation
  • <main> ← دوره main
  • <button> ← دوره button

قارئ الشاشة يقرأ هذه الأدوار. أما <div> فدوره generic — أي "لا شيء".

الجزء الأول: عناصر هيكلة الصفحة

العنصر <header> — رأس الصفحة أو القسم

يحتوي عادةً على الشعار والعنوان وقائمة التنقّل.

<header>
  <img src="logo.png" alt="شعار الموقع" />
  <h1>The Code Fix</h1>
  <nav>...</nav>
</header>

يمكن أن يكون لديك أكثر من <header>: واحد رئيسي للصفحة، وآخر داخل كل <article>.

العنصر <nav> — قائمة التنقّل

مخصّص حصريًا لمجموعات الروابط الرئيسية للتنقّل.

<nav>
  <ul>
    <li><a href="/learn">المسارات</a></li>
    <li><a href="/blog">المدوّنة</a></li>
  </ul>
</nav>

⚠️ ليست كل مجموعة روابط هي <nav>. استخدمه للتنقّل الأساسي فقط.

العنصر <main> — المحتوى الرئيسي

يحتوي على المحتوى الفريد للصفحة الحالية (لا المتكرر مثل الـ header والـ footer).

<main>
  <h1>عنوان الصفحة</h1>
  <p>المحتوى الأساسي هنا...</p>
</main>

🔑 يجب أن يكون هناك عنصر <main> واحد فقط ظاهر في كل صفحة.

العنصران <section> و <article> — هنا يحتار المبتدئون

<article> = محتوى مستقل قائم بذاته يمكن فهمه بمفرده. اسأل: "هل أستطيع مشاركته وحده ويبقى مفهومًا؟" إن نعم، فهو <article>.

<article>
  <h2>كيف تتعلم البرمجة من الصفر</h2>
  <p>نُشر في 21 يونيو 2026...</p>
  <p>محتوى المقال الكامل...</p>
</article>

أمثلة: مقال مدوّنة، منشور، تعليق، بطاقة منتج.

<section> = مجموعة موضوعية من المحتوى المترابط داخل الصفحة، عادةً لها عنوان.

<section>
  <h2>المسارات الأكثر شيوعًا</h2>
  <p>اختر من بين عشرات المسارات...</p>
</section>

🔑 عنصر <section> يجب أن يحتوي على عنوان. إن كانت مجموعتك بلا عنوان طبيعي، فالأرجح أنك تحتاج <div>.

العنصر <aside> — المحتوى الجانبي

محتوى مرتبط بشكل غير مباشر: شريط جانبي، روابط ذات صلة، صندوق "اقرأ أيضًا".

<aside>
  <h3>مقالات ذات صلة</h3>
  <ul>
    <li><a href="#">أفضل لغة للمبتدئين</a></li>
  </ul>
</aside>

العنصر <footer> — تذييل الصفحة أو القسم

يحتوي على حقوق النشر والروابط الثانوية ومعلومات التواصل.

<footer>
  <p>© 2026 The Code Fix — جميع الحقوق محفوظة</p>
</footer>

مثال متكامل: بنية صفحة دلالية كاملة

ادرس هذا المثال جيدًا — فهو يلخّص الدرس كله:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <title>The Code Fix</title>
</head>
<body>

  <header>
    <h1>The Code Fix</h1>
    <nav>
      <ul>
        <li><a href="/learn">المسارات</a></li>
        <li><a href="/blog">المدوّنة</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>مقدمة في HTML الدلالي</h2>
        <p>بقلم فريق The Code Fix — <time datetime="2026-06-21">21 يونيو 2026</time></p>
      </header>

      <section>
        <h3>ما هو HTML الدلالي؟</h3>
        <p>هو استخدام العنصر المناسب للمحتوى المناسب...</p>
      </section>

      <footer>
        <p>شارك المقال مع أصدقائك!</p>
      </footer>
    </article>

    <aside>
      <h3>اقرأ أيضًا</h3>
      <ul>
        <li><a href="#">CSS Flexbox</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 The Code Fix</p>
  </footer>

</body>
</html>

لاحظ كيف أن شجرة العناصر تروي قصة الصفحة دون النظر إليها بصريًا. هذا جوهر HTML الدلالي.

الجزء الثاني: عناصر دلالية للنصوص

العناوين <h1> إلى <h6> — التسلسل الهرمي

العناوين ليست للتكبير والتصغير، بل هيكل هرمي للمحتوى مثل فهرس الكتاب.

<h1>عنوان الصفحة الرئيسي</h1>
  <h2>قسم رئيسي</h2>
    <h3>قسم فرعي</h3>
  <h2>قسم رئيسي ثانٍ</h2>

🔑 عنوان <h1> واحد فقط لكل صفحة، لا تتخطّ المستويات، واختر المستوى حسب المعنى لا الحجم.

<figure> و <figcaption> — الصور مع تعليق

<figure>
  <img src="diagram.png" alt="مخطط يوضح بنية الصفحة" />
  <figcaption>الشكل 1: البنية الدلالية لصفحة ويب.</figcaption>
</figure>

<time> — تواريخ يفهمها الحاسوب

<time datetime="2026-06-21">21 يونيو 2026</time>

خاصية datetime تعطي تنسيقًا قياسيًا يفهمه المتصفح ومحركات البحث.

<details> و <summary> — قائمة منسدلة بدون JavaScript

<details>
  <summary>اضغط لعرض الإجابة</summary>
  <p>HTML اختصار لـ HyperText Markup Language.</p>
</details>

يعطيك سلوك "إظهار/إخفاء" تفاعليًا بلا أي JavaScript، وقابل للوصول تلقائيًا.

عناصر نصية دلالية أخرى

<strong>مهم جدًا</strong>   <!-- أهمية قوية، لا مجرد bold -->
<em>تشديد على الكلمة</em>    <!-- تأكيد، لا مجرد italic -->
<mark>نص مُبرَز</mark>       <!-- مُعلّم مثل قلم التحديد -->
<abbr title="HyperText Markup Language">HTML</abbr>

section مقابل article مقابل div — دليل القرار

اسأل بالترتيب:

  1. هل المحتوى مستقل ويمكن مشاركته وحده ويبقى مفهومًا؟ ← نعم: <article>
  2. هل هو مجموعة موضوعية لها عنوان داخل الصفحة؟ ← نعم: <section>
  3. هل تحتاجه فقط للتنسيق بلا معنى؟ ← نعم: <div>

التأثير على SEO و a11y بتفصيل أعمق

قارئ الشاشة: يعرض للمستخدم الأعمى قائمة معالم (banner، navigation، main، contentinfo) فيقفز إلى ما يريد مباشرة. مع <div> فقط تكون القائمة فارغة.

جوجل: يستخدم <h1> لمعرفة موضوع الصفحة، والتسلسل الهرمي لبناء مخطّط المحتوى، و<article> و<time> لعرض صفحتك كمقال بتاريخ، وتزيد البنية الواضحة فرص ظهورك في المقتطفات المميّزة.

الأخطاء الشائعة عند المبتدئين

❌ الخطأ 1: مرض الـ "Divitis"

استخدام <div> لكل شيء. الحل: استخدم <header> و<nav> و<main>.

❌ الخطأ 2: استخدام <section> كصندوق تنسيق

إن لم يكن لها عنوان ومعنى موضوعي، استخدم <div>.

❌ الخطأ 3: أكثر من <h1> أو تخطّي المستويات

<h1>...</h1> <h4>...</h4>   <!-- ❌ قفزة -->

الحل: <h1> واحد ثم تدرّج منطقي.

❌ الخطأ 4: استخدام <b> و <i> بدل <strong> و <em>

<b> و<i> يغيّران الشكل بلا معنى. الحل: للأهمية والتأكيد استخدم <strong> و<em> (قارئ الشاشة ينطقهما بنبرة مختلفة).

❌ الخطأ 5: نسيان alt في الصور

<figcaption> لا يغني عن alt. ضع دائمًا نصًا بديلًا وصفيًا.

الخلاصة وجدول مرجعي

العنصرالمعنىمتى تستخدمه
<header>رأسأعلى الصفحة أو المقال
<nav>تنقّلالروابط الرئيسية
<main>المحتوى الرئيسيمرة واحدة فقط
<article>محتوى مستقلمقال، منشور، بطاقة
<section>قسم موضوعيمجموعة لها عنوان
<aside>محتوى جانبيشريط جانبي، ذات صلة
<footer>تذييلأسفل الصفحة أو المقال
<figure>وسيط مع تعليقصورة + <figcaption>
<time>وقتتاريخ يفهمه الحاسوب

القاعدة التي تلخّص الدرس: قبل أن تكتب <div>، اسأل: "هل هناك عنصر دلالي يصف هذا المحتوى؟" — إن وُجد، فاستخدمه.

❯ السابقالتالي ❮