أساسيات HTML5

العناوين وهيكل المستند

20 دقيقة الدرس 4 من 18

فهم عناوين HTML

العناوين هي من اهم العناصر في HTML. تحدد هيكل المحتوى وتسلسله الهرمي تماما مثل الفصول والاقسام في كتاب. توفر HTML ستة مستويات من العناوين من <h1> (الاكثر اهمية) وصولا الى <h6> (الاقل اهمية).

العناوين ليست مجرد جعل النص اكبر او اعرض. بل تحمل معنى دلاليا تعتمد عليه المتصفحات ومحركات البحث والتقنيات المساعدة لفهم صفحتك.

مستويات العناوين الستة

يمثل كل مستوى عنوان درجة مختلفة من الاهمية. وسم <h1> هو العنوان الرئيسي للصفحة بينما تمثل <h2> الى <h6> اقساما فرعية متدرجة في الاهمية.

مثال: مستويات العناوين الستة

<h1>عنوان الصفحة الرئيسي</h1>
<h2>قسم رئيسي</h2>
<h3>قسم فرعي</h3>
<h4>قسم فرعي ثانوي</h4>
<h5>نقطة فرعية</h5>
<h6>اقل مستوى عنوان</h6>

بشكل افتراضي تعرض المتصفحات <h1> كاكبر نص واكثره سمكا ويصغر النص تدريجيا مع كل مستوى تال. لكن لا تختر ابدا مستوى العنوان بناء على مظهره بل اختره بناء على التسلسل الهرمي للمحتوى.

قاعدة h1 واحد لكل صفحة

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

مثال: الاستخدام الصحيح لعنوان h1 واحد

<body>
  <h1>الدليل الشامل لعناوين HTML</h1>

  <h2>لماذا العناوين مهمة</h2>
  <p>توفر العناوين هيكلا لمستنداتك...</p>

  <h2>افضل ممارسات العناوين</h2>
  <p>اتبع هذه الارشادات لنتائج افضل...</p>

  <h3>اعتبارات سهولة الوصول</h3>
  <p>تستخدم قارئات الشاشة العناوين للتنقل...</p>
</body>

ملاحظة: غالبا ما يكون عنوان <h1> مشابها لمحتوى وسم <title> لكنهما يخدمان اغراضا مختلفة. يظهر العنوان title في تبويب المتصفح ونتائج البحث بينما يظهر h1 على الصفحة نفسها.

التسلسل الهرمي الدلالي وهيكل المستند

يُنشئ تسلسل العناوين ما يعرف بهيكل المستند. يكشف هذا الهيكل عن البنية المنطقية لمحتواك. يجب ان تتبع العناوين ترتيبا تسلسليا دون تخطي مستويات -- فعنوان <h3> يجب ان يظهر تحت <h2> وليس مباشرة تحت <h1>.

مثال: التسلسل الهرمي الصحيح مقابل الخاطئ

<!-- صحيح: لا يوجد تخطي لمستويات -->
<h1>دورة تطوير الويب</h1>
  <h2>الفصل 1: اساسيات HTML</h2>
    <h3>ما هي HTML؟</h3>
    <h3>اعداد محرر الاكواد</h3>
  <h2>الفصل 2: اساسيات CSS</h2>
    <h3>المحددات</h3>

<!-- خاطئ: تخطي من h1 الى h3 -->
<h1>دورة تطوير الويب</h1>
  <h3>ما هي HTML؟</h3>
  <h4>اعداد محرر الاكواد</h4>

خطا شائع: اختيار مستويات العناوين بناء على الحجم المرئي بدلا من التسلسل الهرمي للمحتوى هو من اكثر الاخطاء شيوعا لدى المبتدئين. لا تستخدم ابدا <h3> لمجرد انك تريد نصا اصغر. استخدم CSS للتحكم في المظهر ودع مستوى العنوان يعكس هيكل المستند.

العناوين وتحسين محركات البحث

تستخدم محركات البحث مثل Google العناوين لفهم موضوع صفحتك. يحمل عنوان <h1> الثقل الاكبر حيث يخبر محركات البحث بالموضوع الرئيسي للصفحة. تساعد العناوين الفرعية (<h2> و <h3>) محركات البحث على فهم المواضيع الفرعية التي تغطيها. التسلسل الهرمي المنظم جيدا يمكن ان يحسن ترتيبك في نتائج البحث بشكل ملحوظ.

عند كتابة العناوين ضمّن الكلمات المفتاحية ذات الصلة بشكل طبيعي. لكن تجنب حشو الكلمات المفتاحية بشكل غير طبيعي لان محركات البحث تعاقب على هذه الممارسة.

العناوين وسهولة الوصول

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

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

نصيحة: يمكنك اختبار هيكل مستندك باستخدام اضافات المتصفح مثل HeadingsMap. تعرض هذه الاضافة التسلسل الهرمي لعناوينك بصريا مما يسهل اكتشاف المستويات المتخطاة او المشاكل الهيكلية قبل ان تؤثر على المستخدمين او ترتيب البحث.

التنسيق مقابل الدلالة

هناك فرق جوهري بين مظهر العنوان ومعناه. يجب التحكم في المظهر المرئي للعناوين بالكامل من خلال CSS بينما يجب ان يعكس مستوى عنوان HTML هيكل المحتوى. قد ترغب في ان يبدو عنوان معين صغيرا لكن اذا كان يمثل قسما رئيسيا يجب ان يبقى <h2> مع تنسيقه بـ CSS ليطابق تصميمك.

مثال: فصل التنسيق عن الهيكل

<!-- خاطئ: استخدام h4 لمجرد الحصول على نص اصغر -->
<h1>مدونتي</h1>
<h4>احدث المقالات</h4>

<!-- صحيح: المستوى الصحيح مع تنسيق CSS -->
<h1>مدونتي</h1>
<h2 class="section-subtitle">احدث المقالات</h2>

في النسخة الصحيحة يمثل مستوى العنوان التسلسل الهرمي للمحتوى بدقة بينما يتحكم صنف CSS في مظهره المرئي. يضمن هذا النهج المرونة في التصميم وسهولة الوصول معا.

بناء هيكل عناوين جيد

الصفحة ذات الهيكل الجيد تُقرا مثل جدول محتويات مفصل. يجب ان يصف كل عنوان بوضوح القسم الذي يليه ويجب ان يعكس التداخل التجميعات المنطقية للمحتوى. قبل كتابة HTML قد يكون من المفيد رسم مخطط العناوين على الورق اولا.

تمرين تطبيقي

انشئ صفحة HTML لموقع مطعم وهمي. استخدم تسلسلا هرميا صحيحا للعناوين مع <h1> واحد لاسم المطعم وعناوين <h2> للاقسام الرئيسية مثل قائمة الطعام ومن نحن والتواصل وعناوين <h3> للاقسام الفرعية مثل المقبلات والاطباق الرئيسية والحلويات تحت قسم قائمة الطعام. اضف فقرة وصفية تحت كل عنوان. راجع هيكلك للتاكد من عدم تخطي اي مستوى عنوان وان المخطط يُقرا بشكل منطقي من الاعلى الى الاسفل.