الوسوم الدلالية في HTML: header و main و footer

تعلمت حتى الآن كيف تضع المحتوى في الصفحة. الآن ستتعلم كيف تنظّم الصفحة كلها في أقسام لها معنى واضح: رأس، وقائمة تنقل، ومحتوى رئيسي، وتذييل. هذه الوسوم تسمى الوسوم الدلالية (Semantic Elements)، وهي ما يميّز الصفحة الاحترافية عن صفحة المبتدئ.

ما معنى «دلالي»؟

كلمة دلالي تعني «له معنى». خذ هذين الوسمين:

• <div>: صندوق عام لا يقول شيئاً عن محتواه.
• <nav>: يقول بوضوح «هنا قائمة تنقل».

تخيّل أنك تنقل أثاث بيتك في صناديق كرتون. إذا كتبت على كل صندوق «صندوق»، فسيحتار عمال النقل أين يضعون كل واحد. أما إذا كتبت «المطبخ» و«غرفة النوم» و«الكتب»، فسيعرف الجميع مكان كل صندوق فوراً. الوسوم الدلالية هي الكتابة على الصناديق.

صفحة بلا وسوم دلالية

هكذا كان كثير من المطورين يكتبون الصفحات قديماً:

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>

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

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

الوسم	معناه
<header>	رأس الصفحة: الشعار واسم الموقع، أو مقدمة مقال
<nav>	مجموعة روابط التنقل الرئيسية
<main>	المحتوى الرئيسي الفريد للصفحة، مرة واحدة فقط
<section>	قسم من المحتوى له موضوع واحد، وغالباً له عنوان
<article>	محتوى مستقل يُفهم وحده: مقال، أو خبر، أو تعليق
<aside>	محتوى جانبي مرتبط بشكل غير مباشر، مثل «اقرأ أيضاً»
<footer>	تذييل الصفحة: حقوق النشر وروابط إضافية

وهذه نفس الصفحة السابقة بالوسوم الدلالية:

<body>
  <header>
    <h1>مدونة أحمد</h1>
    <nav>
      <ul>
        <li><a href="index.html">الرئيسية</a></li>
        <li><a href="about.html">من أنا</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>كيف بدأت تعلّم البرمجة</h2>
      <p>كانت البداية بصفحة HTML بسيطة...</p>
    </article>

    <aside>
      <h3>اقرأ أيضاً</h3>
      <p><a href="tips.html">خمس نصائح للمبتدئين</a></p>
    </aside>
  </main>

  <footer>
    <p>© 2026 مدونة أحمد</p>
  </footer>
</body>

اقرأ الكود مرة أخرى، وستلاحظ أنك تفهم شكل الصفحة كلها من الوسوم وحدها، حتى قبل أن تراها في المتصفح.

section أم article؟

هذا أكثر سؤال يحيّر المبتدئين. استخدم هذا الاختبار البسيط:

لو نقلت هذا الجزء وحده إلى موقع آخر، هل سيظل مفهوماً؟

• نعم ← <article>. مثل مقال كامل أو منشور أو تعليق.
• لا، هو جزء من موضوع أكبر ← <section>. مثل قسم «المميزات» في صفحة منتج.

ويمكن أن تتداخل: مقال <article> طويل يحتوي عدة <section>، وقسم <section> بعنوان «آخر الأخبار» يحتوي عدة <article>.

لماذا تهتم بالوسوم الدلالية؟

1. إمكانية الوصول (Accessibility): قارئ الشاشة يسمح للكفيف بالقفز مباشرة إلى <main> دون سماع القائمة كل مرة، أو الانتقال إلى <nav> بضغطة واحدة.
2. محركات البحث (SEO): Google يفهم أين المحتوى المهم في صفحتك فيعطيه وزناً أكبر.
3. كود أوضح: أنت وزملاؤك تفهمون الصفحة بسرعة عند تعديلها بعد شهور.

هل انتهى دور div؟

لا. ما زال <div> مفيداً جداً عندما تحتاج صندوقاً للتنسيق فقط دون معنى خاص، مثل تجميع عناصر لترتيبها بـ CSS. القاعدة: إذا وُجد وسم دلالي يصف المحتوى فاستخدمه، وإلا فاستخدم <div>.

جرّب بنفسك

هذه صفحة مدونة كاملة بالوسوم الدلالية، مع سطور CSS قليلة لتوضيح حدود كل قسم. أضف <article> ثانياً داخل <main>، وأضف رابطاً جديداً في <nav>:

جرّب بنفسكHTML

محرر الكود (HTML)<style> header, nav, main, article, aside, footer { border: 1px dashed #888; padding: 6px 12px; margin: 6px 0; } </style> <header> <h1>مدونة سارة</h1> <nav> <a href="index.html" target="_blank">الرئيسية</a> | <a href="posts.html" target="_blank">المقالات</a> | <a href="about.html" target="_blank">من أنا</a> </nav> </header> <main> <article> <h2>أول مشروع لي</h2> <p>بنيت اليوم صفحة شخصية بـ HTML فقط!</p> </article> <aside> <h3>اقرأ أيضاً</h3> <p>كيف تنظّم وقت المذاكرة</p> </aside> </main> <footer> <p>© 2026 مدونة سارة</p> </footer>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• أكثر من main في الصفحة: <main> للمحتوى الرئيسي الفريد، ويُكتب مرة واحدة فقط.
• وضع كل رابط داخل nav: <nav> لمجموعات التنقل الرئيسية فقط، لا لكل رابط عابر داخل فقرة.
• استخدام section كبديل لـ div: إذا كان الصندوق للتنسيق فقط وليس له موضوع وعنوان، فاستخدم <div>.

اختبر نفسك

سؤال

أي وسم مناسب لتدوينة كاملة يمكن قراءتها وحدها في موقع آخر؟

<article><aside><section>

سؤال

كم مرة يُكتب الوسم main في الصفحة الواحدة؟

مرة واحدة فقطمرة في كل sectionبلا حدود

الخلاصة

• الوسوم الدلالية تصف معنى المحتوى، و <div> صندوق عام بلا معنى.
• <header> و <nav> و <main> و <footer> تقسّم الصفحة إلى أجزائها الكبرى.
• <article> لمحتوى مستقل، و <section> لقسم من موضوع أكبر، و <aside> لمحتوى جانبي.
• الوسوم الدلالية تحسّن إمكانية الوصول وترتيب محركات البحث ووضوح الكود.
• إذا وُجد وسم دلالي يصف المحتوى فاستخدمه، واترك <div> لما هو تنسيق فقط.