عناصر HTML الدلالية: استخدام header وmain وnav وarticle
تطوير المواقع

عناصر HTML الدلالية: استخدام header وmain وnav وarticle

تعرف إلى العناصر الدلالية في HTML وكيف تختار البنية المناسبة لتحسين وضوح الصفحة وإمكانية الوصول.

لماذا نستخدم العناصر الدلالية؟

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

أهم العناصر

  • header: مقدمة صفحة أو قسم.
  • nav: مجموعة روابط تنقل رئيسية.
  • main: المحتوى الأساسي الفريد للصفحة، وغالبًا مرة واحدة.
  • article: محتوى مستقل يمكن فهمه منفصلًا، مثل مقال.
  • section: قسم موضوعي له عنوان مناسب.
  • aside: محتوى جانبي مرتبط بالسياق.
  • footer: معلومات ختامية للصفحة أو القسم.

مثال عملي

<header><h1>موقعي التعليمي</h1></header>
<nav aria-label="التنقل الرئيسي"><a href="/articles/">المقالات</a></nav>
<main>
  <article>
    <h2>عنوان الدرس</h2>
    <section aria-labelledby="intro"><h3 id="intro">المقدمة</h3><p>محتوى الدرس هنا.</p></section>
  </article>
</main>
<footer>حقوق النشر ومعلومات التواصل</footer>

أخطاء شائعة

لا تستخدم section بدلًا من كل div دون سبب موضوعي، ولا تضع عناصر التنقل داخل nav لمجرد أنها روابط عادية ضمن فقرة. اختر العنصر وفق المعنى الحقيقي للمحتوى.

تحقق بنفسك

افتح صفحة من مشروعك، وحدد الرأس والتنقل والمحتوى الأساسي والتذييل. استخدم أدوات المطور لفحص شجرة العناصر، ثم راجع الصفحة بلوحة المفاتيح.

مراجع موثوقة

تابع سلسلة HTML

تابع الدروس السابقة: ما هي HTML؟، بنية مستند HTML، العناوين والفقرات والروابط، القوائم والصور، وأساسيات النماذج.

بنية دلالية قابلة للفهم

استخدم main للمحتوى الأساسي الفريد للصفحة، وnav لمجموعة روابط التنقل، وarticle لمحتوى مستقل يمكن فهمه منفردًا، وsection لمجموعة موضوعية لها عنوان. لا تختَر العنصر بناءً على شكله الافتراضي؛ يمكن تغيير المظهر عبر CSS دون التضحية بالمعنى.

<header><nav aria-label="التنقل الرئيسي">...</nav></header>
<main>
  <article>
    <h1>عنوان المقال</h1>
    <section aria-labelledby="steps-title">
      <h2 id="steps-title">الخطوات</h2>
    </section>
  </article>
</main>

تجنب استخدام العناصر الدلالية كوسيلة تنسيق فقط، ولا تكرر landmark رئيسيًا بلا داعٍ. افحص شجرة الوصول للتأكد من أن البنية الناتجة تطابق معنى المحتوى.

اختيار العنصر الدلالي المناسب

اختر العنصر بناءً على وظيفة المحتوى لا شكله المرئي. يستخدم nav لمجموعة روابط تنقل رئيسية، وmain للمحتوى الأساسي الفريد للصفحة، وarticle لوحدة محتوى يمكن فهمها مستقلة نسبيًا. لا تستخدم section لمجرد الحصول على مساحة CSS؛ غالبًا تحتاج إلى عنوان يوضح موضوع القسم.

  • اجعل لكل صفحة منطقة main واضحة.
  • سمّ مناطق التنقل المتعددة إذا اختلف غرضها.
  • حافظ على تسلسل عناوين منطقيًا.
  • استخدم button للإجراءات وa للانتقال إلى URL.

HTML الدلالي يساعد التقنيات المساعدة على فهم بنية الصفحة، لكنه لا يغني عن اختبار لوحة المفاتيح وتسميات العناصر والسلوك الفعلي.

خريطة اختيار عناصر HTML الدلالية

توضح العناصر الدلالية وظيفة أجزاء الصفحة، فتسهل قراءتها وصيانتها وتساعد تقنيات المساعدة على تفسير العلاقات. لا تختَر العنصر اعتمادًا على شكل العرض الافتراضي؛ يمكن تغيير المظهر باستخدام CSS مع الحفاظ على المعنى. السؤال الأهم هو: ما دور هذا الجزء في بنية المستند؟

العنصرالدور المعتادمتى لا يكون مناسبًا؟
headerمقدمة لصفحة أو قسمليس بديلًا عن كل حاوية عامة
navمجموعة روابط تنقل رئيسيةلا يلزم تغليف كل رابط منفرد به
mainالمحتوى الأساسي الفريد للصفحةتجنب تكراره كمنطقة main رئيسية متعددة
articleمحتوى مستقل يمكن فهمه بذاتهليس كل صندوق بصري مقالة
sectionقسم موضوعي له عنوان أو غرض واضحلا تستخدمه بدل div لكل تجميع تنسيقي
asideمحتوى جانبي أو مرتبط بالمحتوى الأساسيليس بالضرورة عمودًا جانبيًا بصريًا فقط

العناوين تنظم الأقسام

تساعد العناوين على إظهار خريطة الموضوع. اجعل العنوان يصف القسم الذي يليه، وحافظ على تسلسل منطقي بدل اختيار مستوى عنوان لأسباب تتعلق بحجم الخط. إذا احتاج القسم إلى عنوان فرعي، فاختر المستوى الذي يعكس علاقته بالقسم الأعلى. يمكن تغيير الشكل عبر CSS.

لماذا يفيد ذلك في الصيانة والوصول؟

عندما يستخدم المطور عنصرًا دلاليًا مناسبًا، يستطيع زميله فهم البنية من HTML دون تتبع أصناف CSS فقط. ويمكن لقارئ الشاشة توفير طرق تنقل بين مناطق الصفحة أو العناوين عندما تكون هذه المناطق معرفة بصورة صحيحة. ومع ذلك، لا تعني الدلالات وحدها أن الموقع متاح بالكامل؛ يجب اختبار التركيز والتسميات والتباين والسلوك الفعلي.

مراجعة بنية صفحة

  1. حدد المحتوى الأساسي واستخدم main مرة واحدة للمنطقة الرئيسية.
  2. اجعل روابط التنقل المترابطة داخل nav مع اسم واضح عند وجود أكثر من منطقة تنقل.
  3. استخدم article للمحتوى المستقل وsection للأقسام الموضوعية.
  4. راجع العناوين للتأكد من أنها تعكس بنية المحتوى لا مظهره فقط.
  5. افحص الصفحة باستخدام أدوات المتصفح وتقنيات المساعدة عند الإمكان.

للمزيد راجع شرح الدلالات في MDN ودليل WAI لبنية الصفحة.

مراجعة دلالية لصفحة قبل إطلاقها

افحص الصفحة من منظور شخص يقرأ HTML دون رؤية التصميم. هل يمكنه تمييز منطقة المحتوى الأساسي، والتنقل، والمقال، والأقسام الفرعية؟ إذا كانت البنية تعتمد على أسماء أصناف مثل box1 وblue-area لتفسير المعنى، فقد يكون من المفيد استخدام عناصر دلالية مناسبة حيث تنطبق.

لا تفرط في العناصر الدلالية

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

العناوين والتنقل

تأكد أن كل منطقة رئيسية لها تسمية أو عنوان عند الحاجة، وأن العناوين تعكس التسلسل. إذا احتوى الموقع على أكثر من منطقة nav، فاجعل غرض كل منها واضحًا. لا تستخدم aria-label لنسخ نص ظاهر بلا سبب؛ الهدف هو توضيح اسم أو وظيفة لا تظهر بطريقة كافية.

اختبار مع التقنيات المساعدة

استخدم أدوات فحص الوصول للتعرف إلى المناطق والعناوين، ثم اختبر التنقل اليدوي. قد تكون البنية الدلالية صحيحة لكن الروابط غير واضحة أو التركيز غير مرئي؛ لذلك اجمع بين مراجعة المصدر وتجربة الاستخدام. راجع دليل WAI لبنية الصفحة ومرجع عناصر HTML في MDN.

صيانة البنية الدلالية عند إعادة تصميم الموقع

عند تغيير التصميم، احتفظ بمعنى العناصر حتى لو تغير ترتيبها المرئي. قد يحتاج فريق التصميم إلى نقل قائمة أو تغيير شكل رأس الصفحة، لكن ينبغي ألا يؤدي ذلك إلى فقدان منطقة التنقل أو جعل المحتوى الأساسي غير واضح. راجع بنية DOM بعد إعادة التصميم، لا الصورة المرئية وحدها.

لا تستخدم ARIA لتغطية HTML غير مناسب

اختر العنصر الأصلي الأقرب للوظيفة، ثم أضف وصفًا إضافيًا عند الحاجة. الدور ARIA لا يمنح عنصرًا عاديًا تلقائيًا سلوك زر أو رابط، ولا يعالج ترتيب التركيز أو التفعيل. أي مكون مخصص يحتاج اختبارًا لسلوكه وتسميته وحالاته.

قائمة مراجعة

  • main وnav وarticle وsection تستخدم في مواضع ذات معنى.
  • العناوين تعكس ترتيب المحتوى.
  • العناصر التفاعلية قابلة للوصول بلوحة المفاتيح.
  • الأسماء الظاهرة والمسموعة متسقة.

راجع دليل ARIA Authoring Practices ودليل WAI لبنية الصفحة.

مراجعة الدلالات عند بناء واجهة قابلة للصيانة

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

التمييز بين article وsection وdiv

يصلح article لمحتوى يمكن فهمه كوحدة مستقلة نسبيًا، مثل مقال أو بطاقة خبر ذات معنى مستقل. أما section فيجمع محتوى حول موضوع واحد وغالبًا ما يستفيد من عنوان، بينما div حاوية عامة عندما لا يوجد عنصر أكثر دلالة. لا يلزم أن تكون كل منطقة مرئية قسمًا دلاليًا؛ اختيار أبسط عنصر مناسب يحافظ على شجرة مستند واضحة.

استخدم عناصر التفاعل بحسب وظيفتها

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

تحقق من البنية لا من المظهر وحده

افحص DOM الناتج، وتأكد من وجود main واضح ومن عدم وجود معرفات مكررة أو عناوين تتخطى مستوياتها بلا سبب. استخدم أداة تحقق HTML، ثم جرّب التنقل باستخدام لوحة المفاتيح واختبر قارئ شاشة عند الإمكان. قد يبدو التصميم صحيحًا بصريًا بينما تظل البنية مربكة للتقنيات المساعدة.

راجع شرح MDN لدلالات HTML وإرشادات WAI لبنية الصفحة. الدلالات ليست عامل ترتيب سحريًا، لكنها تحسن قابلية الاستخدام وفهم المحتوى.

اختبر القوالب الدلالية عبر أنواع محتوى مختلفة

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

لا تضف ARIA عندما تكفي HTML

غالبًا ما يوفر العنصر الأصلي الاسم والسلوك المتوقعين. إضافة role غير مناسب قد تستبدل دلالة مفيدة بدل تحسينها. استخدم ARIA عندما تحتاج إلى وصف حالة أو علاقة لا توفرها HTML مباشرة، ثم تحقق من أن الحالة تتحدث مع الواجهة وأن سلوك لوحة المفاتيح يطابق توقعات المستخدم.

اجعل مراجعة DOM جزءًا من الاختبار بعد كل تعديل على القالب، خصوصًا عندما يضاف محتوى ديناميكي. البنية الواضحة تقلل العمل التصحيحي لاحقًا وتجعل المكونات أسهل للفهم والصيانة.

الخلاصة

الخلاصة: اختر العناصر الدلالية وفق دورها في الصفحة، ولا تستخدمها لمجرد المظهر. راجع التسلسل والعناوين والتنقل، ثم اختبر التجربة باستخدام لوحة المفاتيح وتقنيات المساعدة.

الكاتب: عماد الدين لمراني