شرح عناوين HTML بالعربي للمبتدئين — من H1 إلى H6
بعد أن أتقنت هيكل الصفحة والعناصر والخصائص والتعليقات، حان وقت ملء الصفحة بمحتوى حقيقي. أول شيء في أي صفحة ويب هو العنوان. HTML تمنحك ستة مستويات مختلفة من العناوين — وكل واحدة لها دور محدد.
الستة مستويات من العناوين
تتراوح عناوين HTML من <h1> (الأكبر والأهم) إلى <h6> (الأصغر والأقل أهمية).
الحرف h اختصار لكلمة heading أي عنوان بالإنجليزية.
<h1>عنوان المستوى الأول</h1>
<h2>عنوان المستوى الثاني</h2>
<h3>عنوان المستوى الثالث</h3>
<h4>عنوان المستوى الرابع</h4>
<h5>عنوان المستوى الخامس</h5>
<h6>عنوان المستوى السادس</h6>
إذا فتحت هذا الكود في المتصفح، ستلاحظ أن:
<h1>هو أكبر عنوان وأكثفه (Bold)- كلما ارتفع الرقم، كلما صغر العنوان وقلّت أهميته
- المتصفح يضيف تلقائياً مسافة فارغة قبل وبعد كل عنوان
جدول مرجعي — كل مستويات العناوين
| الوسم | الاستخدام النموذجي | الظهور الافتراضي |
|---|---|---|
<h1> |
العنوان الرئيسي للصفحة — مرة واحدة فقط لكل صفحة | الأكبر والأغمق |
<h2> |
عناوين الفصول والأقسام الكبرى | كبير جداً |
<h3> |
عناوين الأقسام الفرعية داخل h2 | كبير |
<h4> |
عناوين التفاصيل داخل h3 | متوسط |
<h5> |
نادر الاستخدام — عناوين ثانوية جداً | صغير |
<h6> |
نادر جداً — أصغر مستوى من العناوين | الأصغر |
لماذا العناوين مهمة جداً؟
العناوين ليست مجرد نص كبير وغامق. لها ثلاثة أدوار أساسية:
1. SEO — مساعدة جوجل على فهم صفحتك
محركات البحث مثل جوجل تقرأ عناوينك لتفهم موضوع صفحتك.
<h1> هو أهم عنصر لـ SEO في صفحتك بأكملها.
جوجل يستخدمه لمعرفة ما تتحدث عنه الصفحة بالضبط.
<!-- صفحة عن تعلم HTML — h1 يخبر جوجل بالموضوع -->
<h1>تعلم HTML من الصفر بالعربي</h1>
<h2>ما هي HTML وكيف تعمل؟</h2>
<h2>الهيكل الأساسي لصفحة HTML</h2>
2. تجربة المستخدم — التنقل السريع في الصفحة
معظم الزوار لا يقرؤون الصفحة كلمة كلمة. يمسحونها بصرياً سريعاً بالنظر إلى العناوين. العناوين الواضحة تجعل زائرك يجد ما يبحث عنه في ثوانٍ.
3. إمكانية الوصول — مساعدة ذوي الإعاقات البصرية
أدوات قراءة الشاشة (Screen Readers) للمكفوفين تعتمد على العناوين للتنقل بين أقسام الصفحة. بنية عناوين صحيحة = صفحة يستطيع الجميع استخدامها.
القواعد الذهبية لاستخدام العناوين
القاعدة 1: استخدم <h1> مرة واحدة فقط في كل صفحة
<!-- ✅ صحيح -->
<h1>تعلم HTML من الصفر</h1>
<h2>ما هي HTML؟</h2>
<h2>كيف تعمل؟</h2>
<!-- ❌ خطأ — h1 مكرر -->
<h1>تعلم HTML من الصفر</h1>
<h1>ما هي HTML؟</h1>
القاعدة 2: اتبع التسلسل المنطقي — لا تقفز من h1 إلى h4
<!-- ✅ صحيح — تسلسل منطقي -->
<h1>فوائد التفاح</h1>
<h2>الفوائد الصحية</h2>
<h3>تقوية المناعة</h3>
<h3>صحة القلب</h3>
<h2>أنواع التفاح</h2>
<!-- ❌ خطأ — قفزة من h1 إلى h4 -->
<h1>فوائد التفاح</h1>
<h4>الفوائد الصحية</h4>
القاعدة 3: لا تستخدم العناوين لتكبير النص فقط
إذا أردت نصاً كبيراً بدون أن يكون عنواناً، استخدم CSS. العناوين لها معنى دلالي — ليست مجرد تنسيق بصري.
<!-- ❌ خطأ — استخدام h3 للتكبير فقط -->
<h3>هذا نص اريده كبيراً لكنه ليس عنواناً</h3>
<!-- ✅ صحيح — استخدام CSS لتكبير النص -->
<p style="font-size: 24px;">هذا نص كبير وليس عنواناً</p>
مثال عملي — هيكل مقال عن HTML
هكذا يبدو استخدام العناوين بشكل صحيح في مقال حقيقي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>تعلم HTML بالعربي — DelArabi</title>
</head>
<body>
<!-- عنوان رئيسي واحد لكل الصفحة -->
<h1>تعلم HTML من الصفر بالعربي</h1>
<!-- الأقسام الرئيسية -->
<h2>ما هي HTML؟</h2>
<p>HTML هي لغة ترميز تُستخدم لبناء صفحات الويب...</p>
<h2>أساسيات HTML</h2>
<!-- أقسام فرعية داخل القسم الرئيسي -->
<h3>الوسوم الأساسية</h3>
<p>الوسوم مثل p وh1 وimg...</p>
<h3>الخصائص (Attributes)</h3>
<p>الخصائص تضيف معلومات للعناصر...</p>
<h2>خطواتك القادمة</h2>
<p>بعد HTML تعلم CSS ثم JavaScript...</p>
</body>
</html>
الأسئلة الشائعة — FAQ
هل يجب استخدام كل المستويات الستة؟
لا. معظم الصفحات تستخدم فقط h1 وh2 وh3. المستويات h4 وh5 وh6 نادرة جداً وتُستخدم فقط في محتوى طويل ومعقد جداً.
هل يمكن وضع HTML داخل عنوان؟
نعم، يمكنك وضع بعض عناصر التنسيق داخل العنوان مثل <em> أو <strong>. لكن تجنب وضع عناصر تكسر تدفق النص كالصور أو الأزرار.
ما الفرق بين <h1> و<title>؟
<title> يحدد اسم الصفحة الذي يظهر في تبويب المتصفح ونتائج جوجل — لا يظهر على الصفحة.
<h1> يظهر على الصفحة نفسها كعنوان رئيسي مرئي. عادةً يكونان متشابهَين لكنهما ليسا نفس الشيء.
هل لجوجل تفضيل لكلمات معينة في h1؟
نعم. ضع الكلمات المفتاحية الأهم التي يبحث عنها جمهورك في <h1>. هذا يحسن ظهورك في نتائج البحث بشكل ملحوظ.
<p> وكيف تتحكم في النص داخل صفحتك.