HTML: عناوين HTML

تمنح وسوم العناوين (heading tags) المحتوى تسلسلاً هرميًا واضحًا، وهو أمر بالغ الأهمية لكل من تجربة المستخدم ومحركات البحث.

1. ما هي وسوم العناوين

يوفر HTML ستة مستويات من وسوم العناوين، من <h1> إلى <h6>. يمثل <h1> أعلى مستوى (الأكثر أهمية)، و <h6> يمثل أدنى مستوى (الأقل أهمية). تُعرض وسوم العناوين بالخط العريض افتراضيًا، مع تناقص أحجام الخطوط من h1 إلى h6.

المعنى الدلالي للعناوين يفوق بكثير مظهرها البصري. تعتمد محركات البحث والتقنيات المساعدة (مثل قارئات الشاشة) على وسوم العناوين لفهم هيكل محتوى الصفحة. لذلك، استخدام العناوين بشكل صحيح أمر حاسم لـ تحسين محركات البحث (SEO) و إمكانية الوصول.

▶ مثال

<h1>عنوان المستوى الأول (الأكثر أهمية)</h1>
<h2>عنوان المستوى الثاني</h2>
<h3>عنوان المستوى الثالث</h3>
<h4>عنوان المستوى الرابع</h4>
<h5>عنوان المستوى الخامس</h5>
<h6>عنوان المستوى السادس (الأقل أهمية)</h6>

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

2. إرشادات استخدام العناوين

على الرغم من أن وسوم العناوين بسيطة الاستخدام، إلا أن هناك عدة إرشادات مهمة يجب اتباعها في الممارسة العملية:

• يجب أن تحتوي كل صفحة على <h1> واحد فقط: يمثل <h1> الموضوع الأساسي للصفحة، ويُستخدم عادةً لعنوان الصفحة أو شعار الموقع. تستخدم محركات البحث محتوى <h1> كإشارة رئيسية لفهم موضوع الصفحة.
• لا يجب تخطي مستويات العناوين: لا تقفز مباشرة من <h1> إلى <h3>. تخطي المستويات يكسر تماسك هيكل المستند ويؤثر سلبًا على SEO وإمكانية الوصول.
• الاستخدام الصحيح للعناوين يمكن أن يحسن ترتيب محركات البحث: تحلل محركات البحث الكلمات المفتاحية في وسوم العناوين. التسلسل الهرمي المنظم جيدًا للعناوين يساعد محركات البحث على فهم محتوى الصفحة بشكل أفضل، مما قد يؤدي إلى ترتيب أفضل.

<!-- تسلسل هرمي صحيح للعناوين -->
<h1>عنوان الموقع</h1>
### ▶ مثال
<h2>تصنيف المقال</h2>
<h3>القسم الفرعي الأول</h3>
<h3>القسم الفرعي الثاني</h3>
<h2>محتوى ذو صلة</h2>

<!-- تسلسل هرمي غير صحيح (تخطي المستويات) -->
<h1>عنوان الموقع</h1>
<h3>تخطي h2، استخدام h3 مباشرة</h3>  <!-- h2 مفقود هنا -->
<h6>قفز من h3 إلى h6، قفزة كبيرة جدًا</h6>

3. أنماط العناوين الافتراضية

للمتصفحات أحجام خطوط وأوزان مدمجة لكل مستوى عنوان. لنرى العرض الفعلي لـ h1~h6 في المتصفح:

4. عنوان h2 24px / 1.5em

(1) عنوان h3 18.72px / 1.17em

عنوان h4 16px / 1em

عنوان h5 13.28px / 0.83emعنوان h6 10.72px / 0.67em يمكنك أن ترى في لمحة: h1 هو الأكبر والأكثر بروزًا، بينما h6 هو الأصغر. هذه هي أنماط العناوين الافتراضية للمتصفح. قد تكون هناك اختلافات طفيفة بين المتصفحات، لكن العلاقة الهرمية العامة متسقة.

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

/* أنماط عناوين CSS مخصصة */
h1 { font-size: 28px; color: #333; }
h2 { font-size: 22px; color: #555; }
h3 { font-size: 18px; color: #777; }

5. العناوين ومخطط الصفحة

عندما تقوم بإنشاء تسلسل هرمي للعناوين في الصفحة، يقوم المتصفح ومحركات البحث بإنشاء "جدول محتويات" لها — وهذا يُسمى مخطط المستند (document outline). فكر في وسوم العناوين مثل "أنماط العناوين" في مستند Word: التسلسل الهرمي الصحيح للعناوين يُنشئ تلقائيًا هيكل جدول محتويات واضح.

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

▶ مثال

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

<!-- هيكل مخطط عنوان مقال مدونة -->
<h1>كيف تتعلم تطوير الواجهة الأمامية</h1>
<h2>1. الثلاثي الأمامي</h2>
<h3>HTML — الهيكل</h3>
<h3>CSS — التنسيق</h3>
<h3>JavaScript — التفاعلية</h3>
<h2>2. مسار التعلم</h2>
<h3>المستوى المبتدئ</h3>
<h3>المستوى المتوسط</h3>
<h3>المستوى المتقدم</h3>
<h2>3. الموارد الموصى بها</h2>

في المثال أعلاه، h1 هو الموضوع العام للمقال، h2 يمثل الفصول الرئيسية الثلاثة، و h3 يمثل الأقسام الفرعية داخل كل فصل. هذا المخطط الهرمي الواضح يجعل من الواضح للوهلة الأولى ما يدور حوله المقال.

▶ مثال

6. العناوين مع الوسوم الدلالية

في HTML5، غالبًا ما تُستخدم الوسوم الدلالية (<article> و <section> و <nav> و <aside>) مع وسوم العناوين معًا. داخل كل كتلة مستقلة، يجب أن يبدأ التسلسل الهرمي للعناوين من جديد من h1 إلى h2، بدلاً من الاستمرار في التسلسل الهرمي من الكتلة الخارجية.

<body>
<h1>مدونتي</h1>

<article>
<h2>عنوان أول مشاركة</h2>
<p>محتوى المقال...</p>
<section>
<h3>عنوان فرعي داخل المقال</h3>
<p>محتوى تفصيلي...</p>
</section>
</article>

<article>
<h2>عنوان ثاني مشاركة</h2>
<p>محتوى المقال...</p>
### ▶ مثال
</article>

<aside>
<h2>عن المؤلف</h2>
<p>السيرة الذاتية للمؤلف...</p>
</aside>
</body>

لاحظ أن كل <article> و <aside> لهما <h2> خاص بهما. إنهم مستقلون عن بعضهم البعض ولا يتداخلون. هذا الأسلوب يتوافق مع المعايير الدلالية ويجعل هيكل الصفحة أوضح.

7. أخطاء العناوين الشائعة

غالبًا ما يرتكب المبتدئون الأنواع التالية من الأخطاء عند استخدام وسوم العناوين. تحقق من كودك مقابل هذه القائمة: نوع الخطأمثال خاطئالنهج الصحيحاستخدام العناوين لحجم الخط<h3>نص عادي</h3> (فقط للخط الصغير)استخدم <p> + خاصية CSS font-sizeوسوم h1 متعددةثلاث وسوم <h1> في صفحة واحدةاحتفظ بـ <h1> واحد فقط كموضوع أساسيتخطي المستوياتh1 → h3 → h5استخدم بالترتيب: h1 → h2 → h3عناوين فارغة<h2></h2> (لا محتوى نصي)يجب أن تحتوي العناوين على نص ذي معنى

<!-- خطأ: استخدام h6 فقط لجعل النص أصغر -->
<h6>معلومات حقوق النشر في التذييل</h6>
<!-- صحيح: معلومات حقوق النشر تستخدم وسم p، حجم الخط مضبوط بـ CSS -->
<p style="font-size: 12px; color: #999;">&copy; 2024 موقعي</p>

<!-- خطأ: تخطي المستويات -->
<h1>عنوان الموقع</h1>
<h4>h2 و h3 مفقودان</h4>
<!-- صحيح: التقدم بالترتيب -->
<h1>عنوان الموقع</h1>
<h2>القسم الرئيسي</h2>
<h3>القسم الفرعي</h3>

<!-- خطأ: وسوم h1 متعددة في صفحة واحدة -->
<h1>الجزء الأول</h1>
<h1>الجزء الثاني</h1>
<!-- صحيح: h1 واحد فقط، والباقي يستخدم h2 -->
<h1>عنوان الصفحة</h1>
<h2>الجزء الأول</h2>
<h2>الجزء الثاني</h2>

▶ مثال

❓ أسئلة شائعة

📖 ملخص

• <h1> إلى <h6> — ستة مستويات إجمالاً؛ h1 هو الأكثر أهمية، h6 الأقل.
• يجب أن تحتوي كل صفحة على <h1> واحد فقط؛ لا يجب تخطي مستويات العناوين.
• المعنى الدلالي للعناوين أهم من المظهر البصري — يؤثر على SEO وإمكانية الوصول.
• تعمل العناوين بشكل أفضل عند دمجها مع الوسوم الدلالية مثل <article> و <section>.
• لا تستخدم وسوم العناوين للتحكم في حجم الخط — اترك التنسيق لـ CSS.

📝 تمارين

1. اكتب مقالاً بعناوين: استخدم التسلسل الهرمي الصحيح لـ <h1> و <h2> و <h3> لكتابة مقال قصير عن موضوع تختاره (مثل "هواياتي"). استخدم على الأقل مستويات h1 و h2 و h3.
2. ابحث عن الأخطاء: ما الخطأ في التسلسل الهرمي للعناوين التالي؟ صححه: <h1>مدونتي</h1> <h3>المقال الأول</h3> <h5>عنوان فرعي</h5> <h1>المقال الثاني</h1>
3. تمرين الملاحظة: افتح موقعًا إخباريًا واستخدم أداة التفقد في المتصفح (F12) لفحص التسلسل الهرمي للعناوين في الصفحة. لاحظ ما إذا كانوا يتبعون قواعد العناوين الصحيحة.

فريق Web-Tutorial التقني

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

من نحن