| الوسم | الدلالة | الحجم الافتراضي | تُستخدم لـ | مرات الاستخدام |
|---|---|---|---|---|
| <h1> | العنوان الرئيسي — أعلى أهمية | ~2em / 32px | عنوان الصفحة أو المقالة الرئيسي | مرة واحدة فقط يُفضّل |
| <h2> | عنوان القسم | ~1.5em / 24px | الأقسام الرئيسية في الصفحة | بلا حد — حسب الحاجة |
| <h3> | عنوان القسم الفرعي | ~1.17em / 18px | أقسام فرعية داخل h2 | بلا حد — حسب الحاجة |
| <h4> | عنوان أعمق | ~1em / 16px | تقسيمات داخل h3 | نادر في معظم الصفحات |
| <h5> | عنوان خامس | ~0.83em / 13px | تقسيمات نادرة جداً | نادر جداً |
| <h6> | أقل أهمية | ~0.67em / 11px | حالات استثنائية | نادر جداً |
| <p> | فقرة نصية | 1em / 16px (margin علوي وسفلي) | النصوص الطويلة وشرح الأفكار | بلا حد — الأساس في المحتوى |
العناوين والفقرات هما أكثر عناصر HTML استخداماً لأنها تشكّل العمود الفقري للمحتوى النصي في أي صفحة ويب. فهمها بعمق يُحسّن البنية المنطقية للصفحة، وأداء محركات البحث (SEO)، وإمكانية الوصول للأشخاص ذوي الاحتياجات الخاصة.
عناصر العنوان h1 إلى h6: توفر HTML ستة مستويات من العناوين، من h1 (الأهم) إلى h6 (الأقل أهمية). هذه المستويات تُنشئ تسلسلاً هرمياً (Hierarchy) للمحتوى يشبه تماماً هيكل كتاب: h1 عنوان الكتاب، h2 عناوين الفصول، h3 عناوين الأقسام الفرعية، وهكذا.
h1: العنوان الرئيسي للصفحة — يجب أن يكون واحداً فقط لكل صفحة في الغالب. محركات البحث تُعطيه أعلى وزن في ترتيب الصفحة لأنه يُعبّر عن الموضوع الرئيسي.
h2 و h3 و h4 و h5 و h6: عناوين فرعية تُنظم المحتوى في أقسام متدرجة. استخدم h2 للأقسام الرئيسية، وh3 للأقسام الفرعية داخل h2، وهكذا. لا تتخط مستويات — مثلاً لا تنتقل من h2 مباشرة لـ h4 دون h3.
عنصر الفقرة p: يُستخدم لكتابة الفقرات النصية. المتصفح يُضيف مسافة (margin) فوق وتحت كل فقرة تلقائياً للتمييز بينها. كل فكرة مستقلة أو جملة فكرية كاملة يجب أن تكون في فقرة منفصلة.
لماذا العناوين مهمة لـ SEO؟ محركات البحث (Google وغيرها) تستخدم عناوين الصفحة لفهم هيكلها وتحديد موضوعها. صفحة ذات تسلسل هرمي واضح للعناوين تحصل على ترتيب أفضل في نتائج البحث. أيضاً، برامج قراءة الشاشة (Screen Readers) للأشخاص المكفوفين تتنقل بين العناوين للفهم السريع للصفحة.
التنسيق الافتراضي للمتصفح: المتصفحات تُطبّق تنسيقاً افتراضياً على العناوين (حجم خط أكبر وخط عريض) لكن يمكن تغيير هذا بالكامل عبر CSS. لا تختار مستوى العنوان بناءً على حجمه الافتراضي — اختره بناءً على أهميته الدلالية في التسلسل الهرمي.
الفرق بين عنصر div والفقرة p: div هو حاوية بلا معنى دلالي، أما p فلها معنى دلالي محدد (فقرة نصية). دائماً استخدم p للنصوص الفقراتية وليس div.
| 1 | <!-- العناوين الستة بالترتيب التنازلي --> |
| 2 | <h1>العنوان الأول — الأهم — واحد فقط في الصفحة</h1> |
| 3 | <h2>العنوان الثاني — قسم رئيسي</h2> |
| 4 | <h3>العنوان الثالث — قسم فرعي</h3> |
| 5 | <h4>العنوان الرابع — قسم فرعي أعمق</h4> |
| 6 | <h5>العنوان الخامس — نادر الاستخدام</h5> |
| 7 | <h6>العنوان السادس — الأقل أهمية</h6> |
| 8 | |
| 9 | <!-- الفقرات النصية --> |
| 10 | <p>هذه فقرة نصية. كل فكرة مستقلة تستحق فقرتها الخاصة.</p> |
| 11 | <p>هذه فقرة ثانية. المتصفح يُضيف مسافة تلقائية بينهما.</p> |
مثال 1: هيكل صفحة مقالة بعناوين متدرجة
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>دليل تعلم البرمجة للمبتدئين</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | |
| 9 | <!-- h1: عنوان المقالة الرئيسي — واحد فقط --> |
| 10 | <h1>دليل تعلم البرمجة للمبتدئين من الصفر</h1> |
| 11 | |
| 12 | <!-- فقرة مقدمة --> |
| 13 | <p> |
| 14 | البرمجة مهارة أساسية في العصر الرقمي. هذا الدليل سيأخذك خطوة بخطوة |
| 15 | من لا تعرف شيئاً إلى أن تبني مشاريعك الخاصة بثقة. |
| 16 | </p> |
| 17 | |
| 18 | <!-- h2: قسم رئيسي --> |
| 19 | <h2>لماذا تتعلم البرمجة؟</h2> |
| 20 | <p> |
| 21 | البرمجة تفتح أمامك أبواب فرص وظيفية واسعة، وتمنحك القدرة على بناء |
| 22 | حلول لمشكلات حقيقية تخدم ملايين الناس. |
| 23 | </p> |
| 24 | |
| 25 | <!-- h2: قسم رئيسي آخر --> |
| 26 | <h2>أين تبدأ؟</h2> |
| 27 | |
| 28 | <!-- h3: قسم فرعي داخل h2 --> |
| 29 | <h3>اختيار لغة البرمجة الأولى</h3> |
| 30 | <p> |
| 31 | للمبتدئين، ننصح بالبدء بـ HTML و CSS لأنهما سهلتا التعلم |
| 32 | والنتيجة مرئية فورية، ثم الانتقال لـ JavaScript. |
| 33 | </p> |
| 34 | |
| 35 | <h3>الأدوات الأساسية</h3> |
| 36 | <p>تحتاج فقط إلى ثلاثة أشياء للبدء:</p> |
| 37 | |
| 38 | <!-- h4: قسم أعمق داخل h3 --> |
| 39 | <h4>محرر الكود</h4> |
| 40 | <p>نوصي بـ VS Code — مجاني وقوي ويعمل على كل الأنظمة.</p> |
| 41 | |
| 42 | <h4>المتصفح</h4> |
| 43 | <p>Chrome أو Firefox للتطوير — كلاهما يملك أدوات مطور ممتازة.</p> |
| 44 | |
| 45 | <!-- h2: قسم رئيسي ثالث --> |
| 46 | <h2>خلاصة</h2> |
| 47 | <p> |
| 48 | البداية هي أصعب خطوة. ابدأ الآن بكتابة أول سطر HTML |
| 49 | وستتفاجأ كيف تنمو مهاراتك بسرعة مع الممارسة اليومية. |
| 50 | </p> |
| 51 | |
| 52 | </body> |
| 53 | </html> |
مثال 2: الفرق المرئي بين مستويات العناوين
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>مستويات العناوين</title> |
| 6 | <style> |
| 7 | body { font-family: Arial, sans-serif; padding: 20px; } |
| 8 | h1 { color: #1e40af; } /* أزرق غامق */ |
| 9 | h2 { color: #2563eb; } /* أزرق */ |
| 10 | h3 { color: #3b82f6; } /* أزرق فاتح */ |
| 11 | h4 { color: #60a5fa; } /* أزرق أفتح */ |
| 12 | p { color: #374151; line-height: 1.7; } |
| 13 | </style> |
| 14 | </head> |
| 15 | <body> |
| 16 | <h1>h1 — العنوان الأكبر والأهم (الحجم: ~2rem)</h1> |
| 17 | <h2>h2 — عنوان القسم الرئيسي (الحجم: ~1.5rem)</h2> |
| 18 | <h3>h3 — عنوان القسم الفرعي (الحجم: ~1.17rem)</h3> |
| 19 | <h4>h4 — عنوان أعمق (الحجم: ~1rem)</h4> |
| 20 | <h5>h5 — عنوان صغير (الحجم: ~0.83rem)</h5> |
| 21 | <h6>h6 — الأصغر والأقل أهمية (الحجم: ~0.67rem)</h6> |
| 22 | |
| 23 | <hr> |
| 24 | |
| 25 | <p>هذه فقرة عادية — تُستخدم للنصوص الطويلة والشرح.</p> |
| 26 | <p>فقرة ثانية — لاحظ المسافة التلقائية بين الفقرات.</p> |
| 27 | <p> |
| 28 | يمكن كتابة الفقرة في عدة سطور في الكود لكن المتصفح |
| 29 | يعرضها كسطر متواصل واحد. |
| 30 | </p> |
| 31 | </body> |
| 32 | </html> |