الوسوم الدلالية في HTML — دليل شامل Semantic HTML 2026

في المقال السابق، تعلمت النماذج والجداول. الآن سنتعلم الوسوم الدلالية (Semantic Tags) — وهي ما يجعل HTML احترافياً و صديقاً لمحركات البحث.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الوسوم الدلالية، مع تمارين وحلول.

ما هي الوسوم الدلالية؟

الوسوم الدلالية هي وسوم HTML تصف معنى المحتوى، وليس شكله فقط.

مثال:

<!-- ❌ غير دلالي: -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- ✅ دلالي: -->
<header>
  <nav>...</nav>
</header>

الفرق:

• الأول: لا أحد يعرف ما هو <div class="header"> (قد يكون رأس الصفحة، أو بطاقة، إلخ).
• الثاني: <header> يُخبر المتصفح بوضوح أنه رأس الصفحة.

لماذا الوسوم الدلالية؟

• SEO: محركات البحث تفهم المحتوى أفضل.
• إمكانية الوصول: قارئات الشاشة تفهم البنية.
• الصيانة: الكود أوضح للفريق.
• الأداء: المتصفح يحسّن العرض.
• المعايير: HTML5 يوصي بها.

مقارنة: قبل وبعد

قبل (غير دلالي):

<div id="header">
  <div class="logo">شعاري</div>
  <div class="nav">
    <a href="/">الرئيسية</a>
    <a href="/about">من نحن</a>
  </div>
</div>

<div id="content">
  <div class="post">
    <h2>عنوان المقال</h2>
    <p>محتوى المقال...</p>
  </div>
</div>

<div id="footer">
  <p>© 2026</p>
</div>

بعد (دلالي):

<header>
  <div class="logo">شعاري</div>
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/about">من نحن</a>
  </nav>
</header>

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

<footer>
  <p>© 2026</p>
</footer>

الفرق واضح: الكود الثاني يشرح نفسه.

الوسوم الدلالية الرئيسية

1. <header> — الرأس

يحتوي عادة على:

• الشعار (Logo).
• شريط التنقل.
• معلومات تمهيدية.

<header>
  <img src="logo.png" alt="شعاري">
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/about">من نحن</a>
  </nav>
</header>

ملاحظات:

• يمكن أن يكون رأس الصفحة كامل.
• أو رأس مقال داخل <article>.

2. <nav> — شريط التنقل

يحتوي على:

• روابط التنقل الرئيسية.
• قوائم.

<nav>
  <ul>
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/articles">المقالات</a></li>
    <li><a href="/learn">تعلّم</a></li>
    <li><a href="/about">من نحن</a></li>
  </ul>
</nav>

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

3. <main> — المحتوى الرئيسي

يحتوي على:

• المحتوى الفريد للصفحة.
• لا يتكرر بين الصفحات.

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

قواعد <main>:

• ✅ مرة واحدة فقط في الصفحة.
• ❌ لا يحتوي على <header>, <footer>, <nav> (مكررة).
• ✅ يحتوي على <article>, <section>, إلخ.

4. <section> — قسم

قسم منطقي من الصفحة، عادة له عنوان.

<section>
  <h2>خدماتنا</h2>
  <p>نقدم خدمات...</p>
</section>

<section>
  <h2>من نحن</h2>
  <p>نحن فريق...</p>
</section>

متى تستخدم <section>؟

• عند وجود قسم له عنوان ومنطق خاص.
• بديل: <div> إذا كان القسم لأغراض التنسيق فقط.

5. <article> — مقال

محتوى مستقل يمكن نشره بذاته (مقال، تدوينة، تعليق).

<article>
  <header>
    <h2>عنوان المقال</h2>
    <p>بقلم أحمد — 2026-10-25</p>
  </header>
  
  <p>محتوى المقال...</p>
  
  <footer>
    <p>الوسوم: #HTML #CSS</p>
  </footer>
</article>

الفرق بين <section> و <article>:

المعيار	section	article
الاستقلال	جزء من شيء أكبر	مستقل بذاته
المثال	"قسم الخدمات"	"مقال مدونة"
النشر	لا يُنشر وحده	يمكن نشره وحده

6. <aside> — محتوى جانبي

محتوى ثانوي غير أساسي:

• شريط جانبي.
• إعلانات.
• روابط ذات صلة.
• معلومات إضافية.

<aside>
  <h3>مقالات ذات صلة</h3>
  <ul>
    <li><a href="/post1">مقال 1</a></li>
    <li><a href="/post2">مقال 2</a></li>
  </ul>
</aside>

7. <footer> — التذييل

يحتوي عادة على:

• حقوق النشر.
• روابط التواصل.
• معلومات الاتصال.

<footer>
  <p>© 2026 موقعي — جميع الحقوق محفوظة</p>
  <nav>
    <a href="/privacy">سياسة الخصوصية</a>
    <a href="/terms">الشروط</a>
  </nav>
</footer>

8. <figure> و <figcaption>

لربط صورة/رسم بتعليق:

<figure>
  <img src="chart.jpg" alt="رسم بياني">
  <figcaption>الشكل 1: المبيعات الشهرية</figcaption>
</figure>

9. <time> — التاريخ والوقت

<p>نُشر في <time datetime="2026-10-25">25 أكتوبر 2026</time></p>

الفائدة: محركات البحث تفهم التاريخ.

10. <mark> — التمييز

<p>هذا نص <mark>مميز بخلفية صفراء</mark>.</p>

بنية صفحة كاملة (دلالية)

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونتي | NahdaAI</title>
</head>
<body>
  <!-- الرأس -->
  <header>
    <img src="logo.png" alt="شعاري" width="100">
    <nav>
      <ul>
        <li><a href="/">الرئيسية</a></li>
        <li><a href="/articles">المقالات</a></li>
        <li><a href="/about">من نحن</a></li>
      </ul>
    </nav>
  </header>

  <!-- المحتوى الرئيسي -->
  <main>
    <h1>آخر المقالات</h1>
    
    <article>
      <header>
        <h2>تعلم HTML في 30 يوماً</h2>
        <p>
          بقلم <strong>أحمد</strong> — 
          <time datetime="2026-10-25">25 أكتوبر 2026</time>
        </p>
      </header>
      
      <p>HTML هي أساس كل موقع...</p>
      
      <footer>
        <p>الوسوم: <a href="/tag/html">#HTML</a> <a href="/tag/css">#CSS</a></p>
      </footer>
    </article>
    
    <article>
      <header>
        <h2>مقدمة في CSS</h2>
        <p>
          بقلم <strong>محمد</strong> — 
          <time datetime="2026-10-24">24 أكتوبر 2026</time>
        </p>
      </header>
      
      <p>CSS هي لغة التنسيق...</p>
    </article>
  </main>

  <!-- محتوى جانبي -->
  <aside>
    <h3>روابط سريعة</h3>
    <ul>
      <li><a href="/learn">مسارات التعلم</a></li>
      <li><a href="/free">الموارد المجانية</a></li>
    </ul>
  </aside>

  <!-- التذييل -->
  <footer>
    <p>© 2026 NahdaAI — جميع الحقوق محفوظة</p>
    <nav>
      <a href="/privacy">سياسة الخصوصية</a>
      <a href="/contact">اتصل بنا</a>
    </nav>
  </footer>
</body>
</html>

جدول الوسوم الدلالية

الوسم	الوظيفة	يحتوي على
<header>	رأس الصفحة/القسم	شعار، nav، عنوان
<nav>	شريط التنقل	روابط رئيسية
<main>	المحتوى الرئيسي	المقالات، الأقسام
<section>	قسم	عنوان + محتوى
<article>	مقال مستقل	عنوان، محتوى، تذييل
<aside>	محتوى جانبي	روابط، إعلانات
<footer>	التذييل	حقوق، روابط
<figure>	صورة + تعليق	img + figcaption
<time>	تاريخ/وقت	نص التاريخ
<mark>	تمييز	نص

أمثلة عملية

1. صفحة مدونة

<header>
  <h1>مدونتي</h1>
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/articles">المقالات</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>تعلم HTML</h2>
      <time datetime="2026-10-25">25 أكتوبر 2026</time>
    </header>
    <p>محتوى المقال...</p>
  </article>
</main>

<footer>
  <p>© 2026</p>
</footer>

2. صفحة منتج

<header>
  <h1>متجري</h1>
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/cart">السلة</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>لابتوب Dell XPS 15</h2>
      <p>السعر: 5500 $</p>
    </header>
    
    <figure>
      <img src="laptop.jpg" alt="لابتوب Dell XPS 15">
      <figcaption>لابتوب احترافي</figcaption>
    </figure>
    
    <section>
      <h3>المواصفات</h3>
      <ul>
        <li>معالج i7</li>
        <li>16GB RAM</li>
        <li>512GB SSD</li>
      </ul>
    </section>
    
    <footer>
      <button>أضف للسلة</button>
    </footer>
  </article>
</main>

<footer>
  <p>© 2026 متجري</p>
</footer>

3. صفحة رئيسية

<header>
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/about">من نحن</a>
  </nav>
</header>

<main>
  <section>
    <h1>مرحباً بك</h1>
    <p>هذا موقعي الشخصي.</p>
  </section>
  
  <section>
    <h2>خدماتنا</h2>
    <article>
      <h3>تصميم مواقع</h3>
      <p>نصمم مواقع احترافية...</p>
    </article>
    <article>
      <h3>تطوير تطبيقات</h3>
      <p>نطور تطبيقات ويب...</p>
    </article>
  </section>
  
  <section>
    <h2>آخر المقالات</h2>
    <article>
      <h3>مقال 1</h3>
      <p>...</p>
    </article>
  </section>
</main>

<aside>
  <h3>روابط سريعة</h3>
  <ul>
    <li><a href="/learn">تعلّم</a></li>
  </ul>
</aside>

<footer>
  <p>© 2026</p>
</footer>

تمارين عملية

تمرين 1: بنية صفحة

أنشئ بنية صفحة بـ header, main, footer.

الحل:

<header>
  <h1>موقعي</h1>
</header>

<main>
  <p>محتوى الصفحة</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

تمرين 2: nav

أنشئ شريط تنقل بـ 4 روابط.

الحل:

<nav>
  <ul>
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/about">من نحن</a></li>
    <li><a href="/services">خدماتنا</a></li>
    <li><a href="/contact">اتصل بنا</a></li>
  </ul>
</nav>

تمرين 3: article

أنشئ مقالاً بدلالة كاملة.

الحل:

<article>
  <header>
    <h2>تعلم HTML</h2>
    <time datetime="2026-10-25">25 أكتوبر 2026</time>
  </header>
  <p>محتوى المقال...</p>
  <footer>
    <p>الوسوم: #HTML</p>
  </footer>
</article>

تمرين 4: section

أنشئ صفحة بأقسام متعددة.

الحل:

<main>
  <section>
    <h2>من نحن</h2>
    <p>نحن فريق...</p>
  </section>
  
  <section>
    <h2>خدماتنا</h2>
    <p>نقدم...</p>
  </section>
  
  <section>
    <h2>اتصل بنا</h2>
    <p>راسلنا...</p>
  </section>
</main>

تمرين 5: figure

أضف صورة بتعليق.

الحل:

<figure>
  <img src="photo.jpg" alt="صورة">
  <figcaption>الشكل 1: صورة توضيحية</figcaption>
</figure>

تمرين 6: aside

أضف شريطاً جانبياً.

الحل:

<aside>
  <h3>مقالات ذات صلة</h3>
  <ul>
    <li><a href="/post1">مقال 1</a></li>
    <li><a href="/post2">مقال 2</a></li>
    <li><a href="/post3">مقال 3</a></li>
  </ul>
</aside>

تمرين 7: time

أضف تاريخ نشر لمقال.

الحل:

<article>
  <h2>مقالي</h2>
  <p>نُشر في <time datetime="2026-10-25">25 أكتوبر 2026</time></p>
</article>

تمرين 8: صفحة كاملة

أنشئ صفحة كاملة بكل الوسوم الدلالية.

الحل:

<header>
  <h1>مدونتي</h1>
  <nav>
    <a href="/">الرئيسية</a>
    <a href="/about">من نحن</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>مقالي الأول</h2>
      <time datetime="2026-10-25">25 أكتوبر 2026</time>
    </header>
    <p>محتوى المقال...</p>
  </article>
</main>

<aside>
  <h3>روابط</h3>
  <ul><li><a href="/">رابط</a></li></ul>
</aside>

<footer>
  <p>© 2026</p>
</footer>

حل المشاكل الشائعة

🔴 المشكلة 1: <main> أكثر من مرة

السبب: استخدام <main> عدة مرات.

الحل: <main> مرة واحدة فقط في الصفحة.

🔴 المشكلة 2: <article> داخل <article>

السبب: تداخل غير ضروري.

الحل: استخدم <section> للتداخل الداخلي.

🔴 المشكلة 3: <nav> لكل روابط

السبب: استخدام <nav> لكل مجموعة روابط.

الحل: <nav> فقط للتنقل الرئيسي.

🔴 المشكلة 4: <header> متعدد

السبب: استخدام <header> لكل قسم.

الحل: <header> يمكن استخدامه مرة للصفحة + مرة لكل <article>.

🔴 المشكلة 5: عدم استخدام <main>

السبب: نسيان الوسم.

الحل: كل صفحة يجب أن تحتوي على <main> واحد.

جدول: قبل وبعد

الوسم الدلالي	البديل غير الدلالي
<header>	<div class="header">
<nav>	<div class="nav">
<main>	<div id="content">
<section>	<div class="section">
<article>	<div class="post">
<aside>	<div class="sidebar">
<footer>	<div class="footer">

قائمة تحقق نهائية

المهمة	الحالة
فهم الوسوم الدلالية	⬜
استخدام header, nav, main, footer	⬜
استخدام section و article	⬜
استخدام aside	⬜
استخدام figure و figcaption	⬜
بناء صفحة دلالية كاملة	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

🎉 مبروك! أكملت قسم HTML!

الآن أنت جاهز للانتقال إلى CSS:

1. مقدمة في CSS — المحددات والخصائص.
2. الألوان و Box Model — التصميم الأساسي.
3. Flexbox و Grid — التخطيط الحديث.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هي الوسوم الدلالية ولماذا نحتاجها.
• ✅ <header>, <nav>, <main>, <footer>.
• ✅ <section> و <article>.
• ✅ <aside> و <figure>.
• ✅ <time> و <mark>.
• ✅ بنية صفحة دلالية كاملة.
• ✅ حل 8 تمارين عملية.

تذكر: الوسوم الدلالية تجعل موقعك احترافياً و صديقاً لمحركات البحث.