انتقل إلى المحتوى

HTML الدلالية: header وnav وmain وarticle وsection وaside وfooter (مع أمثلة)

قد تبدو صفحتان متطابقتين وتكونان مبنيتين بطريقة مختلفة تماماً. فالأولى كومة من صناديق <div>، والثانية تقول "هذا رأس الموقع، وهذا التنقل، وهذا المحتوى الرئيسي، وهذا شريط جانبي ذو صلة". والثانية تتيح لمستخدم قارئ الشاشة القفز مباشرة إلى المحتوى، وتساعد محركات البحث على إيجاد النص الرئيسي، ويسهل على المطوّر التالي تعديلها كثيراً.

الإجابة المختصرة

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

20 دقيقة للقراءة والتمرين · روجع المحتوى في 20 أكتوبر 2026

في هذا الدرس سوف

  • تخطط صفحة كاملة بعناصر المعالم
  • تختار بين article وsection وdiv
  • تشرح كيف تساعد المعالم مستخدمي قارئات الشاشة

المعالم: خريطة الصفحة

بعض العناصر تنشئ معالم، وهي مناطق تسردها التقنيات المساعدة ليقفز المستخدمون إليها. فـ <header> غير الموجود داخل article أو section يصبح معلم "banner"، و<nav> معلم "navigation"، و<main> معلم "main"، و<aside> معلم "complementary"، و<footer> في المستوى الأعلى معلم "contentinfo". وفي قارئات الشاشة مثل NVDA وVoiceOver مفاتيح للتنقل بين المعالم.

يجب أن تحتوي الصفحة على <main> ظاهر واحد فقط. ضع فيه المحتوى الخاص بهذه الصفحة، وأبقِ الأجزاء المتكررة مثل رأس الموقع وتذييله خارجه. وتضيف مواقع كثيرة رابط "تخطَّ إلى المحتوى" في أعلى الصفحة يشير إلى #main، فيتخطى مستخدمو لوحة المفاتيح القائمة بضغطة واحدة.

جرّبه: هيكل صفحة كامل بالمعالم
الشيفرة
النتيجةتتحدث أثناء الكتابة
وحدة التحكم
  1. تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.

تبدو النتيجة بسيطة لعدم وجود CSS بعد. فالمهم هنا هو البنية، وستنسّق دورة CSS هذه الصفحة نفسها.

article وsection وdiv

استخدم <article> للمحتوى الذي يبقى مفهوماً وحده لو شاركته أو أعدت نشره: منشور مدونة أو خبر أو بطاقة منتج أو تعليق. واسأل: "هل يمكن أن يظهر وحده في موجز؟" إذا كان الجواب نعم فهو article. ويمكن أن يكون للمقالة <header> و<footer> خاصان بها، مثل اسم الكاتب والتاريخ.

استخدم <section> لجزء من الصفحة أو المقالة له موضوعه الخاص، وأعطه عنواناً. وإذا احتجت صندوقاً للتنسيق فقط، مثل غلاف لشبكة، فهو <div>، فلا معنى له، وهذا بالضبط ما يناسب أداة التنسيق.

وهناك عناصر دلالية أخرى تستحق المعرفة: <time datetime="2026-10-20">20 October</time> يعطي الآلات تاريخاً دقيقاً، و<address> يضم بيانات التواصل لصاحب الصفحة أو كاتب المقالة، و<details> مع <summary> ينشئ كتلة تتوسع وتنطوي تلقائياً، وهو المستخدم في الأسئلة الشائعة في هذه الصفحة.

جرّبه: مقالة لها رأس وتذييل خاصان
الشيفرة
النتيجةتتحدث أثناء الكتابة
وحدة التحكم
  1. تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.

لماذا يستحق الأمر

HTML الدلالية ليست لسهولة الوصول فقط. فأوضاع القراءة في المتصفحات تستخدمها لإيجاد النص الرئيسي، ومحركات البحث تستخدمها لفصل المحتوى عن القوائم، وتصبح شيفرات CSS وJavaScript لديك أبسط لأنك تستطيع استهداف main nav بدلاً من .div-wrapper-3. ولا تكلّف كتابتها شيئاً إضافياً.

وإذا احتوت الصفحة على أكثر من <nav>، مثل القائمة الرئيسية وروابط التذييل، فأعطِ كل واحد aria-label مثل "Main" أو "Footer" ليميّز مستخدمو قارئات الشاشة بينها.

أخطاء شائعة

  • تكديس عناصر div

    <div class="header"> و<div class="nav"> و<div class="footer"> تبدو متشابهة لكنها لا تنشئ معالم. استخدم العناصر الحقيقية.

  • أكثر من main

    يجب أن يكون في الصفحة <main> ظاهر واحد فقط. وإذا كان لديك منطقتان كبيرتان، فإحداهما المحتوى الرئيسي والأخرى غالباً <aside>.

  • section بلا عنوان

    عنصر <section> بلا عنوان غالباً مجرد صندوق. أضف عنواناً يسمّي الموضوع، أو استخدم <div>.

تمرين

أعد كتابة صفحة div بعناصر دلالية: header يحتوي nav فيه رابطان على الأقل، وmain واحد فيه h1، وarticle فيه h2 داخل main، وfooter.

الشيفرة
النتيجةتتحدث أثناء الكتابة
وحدة التحكم
  1. تظهر هنا رسائل وحدة التحكم والأخطاء وبيانات النماذج والروابط التي تنقرها.
  • header فيه nav يضم رابطين
  • عنصر main فيه h1
  • article فيه h2 داخل main
  • footer للصفحة
اعرض حلاً ممكناً
<header>
  <nav aria-label="Main"><a href="/">Home</a> <a href="/blog">Blog</a></nav>
</header>
<main>
  <h1>My blog</h1>
  <article>
    <h2>First post</h2>
    <p>Hello!</p>
  </article>
</main>
<footer>© 2026</footer>

اختبار سريع

  1. 1. موقع أخبار يعرض عشرة أخبار في صفحته الرئيسية. أي عنصر يحيط بكل بطاقة خبر؟
  2. 2. كم عنصر <main> ظاهر يجب أن يكون في الصفحة؟
  3. 3. تحتاج غلافاً فقط لوضع ثلاث بطاقات في شبكة. أي عنصر تستخدم؟
  4. 4. أي عنصر يعطي تاريخاً تقرؤه الآلات؟
أجب عن كل الأسئلة لتتحقق.

أنهيت الدرس؟

أسئلة يطرحها الناس

هل ترفع HTML الدلالية الترتيب في Google؟

لا تعد Google برفع الترتيب بسبب أي عنصر. لكن الترميز الدلالي يساعدها على فهم النص الذي يمثل المحتوى الرئيسي، ويحسّن سهولة الوصول وأوضاع القراءة، وهذا سبب كافٍ.

هل يمكن وضع header داخل article؟

نعم. فـ <header> داخل article أو section هو مقدمة ذلك الجزء، وغالباً عنوانه واسم كاتبه. ولا يصبح معلم banner للصفحة إلا الرأس في المستوى الأعلى.

هل كل مجموعة روابط عنصر nav؟

لا. استخدم <nav> لكتل التنقل الرئيسية مثل القائمة الرئيسية أو جدول المحتويات أو ترقيم الصفحات. أما بضعة روابط داخل فقرة أو قائمة مقالات ذات صلة فلا تحتاج إليه.

ما ARIA وهل أستخدمها هنا؟

تضيف سمات ARIA معلومات وصول لا تستطيع HTML التعبير عنها. والقاعدة الأولى لـ ARIA من W3C هي استخدام عنصر HTML الأصلي متى وُجد، لذا فضّل <nav> على <div role="navigation">.

كيف أرى معالم الصفحة؟

تعرض أدوات المطوّر في المتصفح شجرة الوصول (في Chrome وEdge افتح DevTools ثم لوحة Accessibility)، وتوجد إضافات مجانية تسرد المعالم. كما تحتوي قارئات الشاشة على قائمة للمعالم.

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

تبقى أمثلة الشيفرة بالإنجليزية وتعمل في بيئة معزولة على جهازك. والنص العربي بانتظار المراجعة من متحدث أصلي. وإذا لاحظت خطأ فأخبرنا عبر صفحة التواصل.