دليل شامل لتاغات العناوين H1 إلى H6

مقدمة عن تاغات العناوين

تاغات العناوين (Heading Tags) هي عناصر HTML المستخدمة لإنشاء هيكل هرمي للمحتوى وتنظيمه. تتراوح من H1 (الأهم) إلى H6 (الأقل أهمية).

التسلسل الهرمي للعناوين

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

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

HTML

تفاصيل كل تاغ

تاغ H1

<h1>العنوان الرئيسي للصفحة</h1>

<h1>العنوان الرئيسي للصفحة</h1>

HTML

الاستخدام:

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

خصائص التصميم الافتراضية:

الحجم: 2em (32px تقريباً)
الوزن: bold
المساحة: margin عمودية

تاغ H2

<h2>العناوين الفرعية الرئيسية</h2>

<h2>العناوين الفرعية الرئيسية</h2>

HTML

الاستخدام:

للأقسام الرئيسية في الصفحة
يمكن استخدام عدة H2 في الصفحة الواحدة
يأتي مباشرة بعد H1 في التسلسل الهرمي

خصائص التصميم الافتراضية:

الحجم: 1.5em (24px تقريباً)
الوزن: bold

<h3>العناوين الفرعية الثانوية</h3>

<h3>العناوين الفرعية الثانوية</h3>

HTML

الاستخدام:

للأقسام الفرعية تحت H2
لتقسيم المحتوى إلى أجزاء أصغر
يستخدم بكثرة في المقالات والمدونات

خصائص التصميم الافتراضية:

الحجم: 1.17em (18px تقريباً)
الوزن: bold

تاغ H4

<h4>عناوين المستوى الرابع</h4>

<h4>عناوين المستوى الرابع</h4>

HTML

الاستخدام:

للتفاصيل تحت H3
في الوثائق الطويلة والمعقدة
للخطوات والإجراءات المفصلة

خصائص التصميم الافتراضية:

الحجم: 1em (16px – حجم النص العادي)
الوزن: bold

تاغ H5

<h5>عناوين المستوى الخامس</h5>

<h5>عناوين المستوى الخامس</h5>

HTML

الاستخدام:

نادر الاستخدام
للتفاصيل الدقيقة جداً
في الوثائق التقنية المعقدة

خصائص التصميم الافتراضية:

الحجم: 0.83em (13px تقريباً)
الوزن: bold

تاغ H6

<h6>عناوين المستوى السادس</h6>

<h6>عناوين المستوى السادس</h6>

HTML

الاستخدام:

الأقل استخداماً
للتفاصيل الأدق
في حالات خاصة جداً

خصائص التصميم الافتراضية:

الحجم: 0.67em (11px تقريباً)
الوزن: bold

أماكن الاستعمال

في المواقع الإخبارية

<h1>عنوان الموقع أو الخبر الرئيسي</h1>
<h2>عناوين الأقسام (سياسة، اقتصاد، رياضة)</h2>
<h3>عناوين الأخبار الفرعية</h3>

<h1>عنوان الموقع أو الخبر الرئيسي</h1>
<h2>عناوين الأقسام (سياسة، اقتصاد، رياضة)</h2>
<h3>عناوين الأخبار الفرعية</h3>

HTML

في المدونات

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

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

HTML

في المواقع التجارية

<h1>اسم الشركة أو المنتج الرئيسي</h1>
<h2>أقسام الخدمات</h2>
<h3>تفاصيل كل خدمة</h3>

<h1>اسم الشركة أو المنتج الرئيسي</h1>
<h2>أقسام الخدمات</h2>
<h3>تفاصيل كل خدمة</h3>

HTML

في صفحات الهبوط

<h1>العرض الرئيسي</h1>
<h2>فوائد المنتج</h2>
<h3>تفاصيل كل فائدة</h3>

<h1>العرض الرئيسي</h1>
<h2>فوائد المنتج</h2>
<h3>تفاصيل كل فائدة</h3>

HTML

التوصيات والممارسات الجيدة

التوصيات العامة

استخدم H1 واحد فقط في كل صفحة
حافظ على التسلسل الهرمي – لا تقفز من H1 إلى H3
اجعل العناوين وصفية ومفهومة
استخدم الكلمات المفتاحية بطريقة طبيعية

التوصيات للمحتوى العربي

<!-- صحيح -->
<h1>دليل شامل لتعلم البرمجة</h1>
<h2>لغات البرمجة للمبتدئين</h2>
<h3>لغة JavaScript</h3>
<h4>متغيرات JavaScript</h4>

<!-- خطأ -->
<h1>دليل شامل لتعلم البرمجة</h1>
<h4>لغة JavaScript</h4> <!-- قفز في التسلسل -->

<!-- صحيح -->
<h1>دليل شامل لتعلم البرمجة</h1>
<h2>لغات البرمجة للمبتدئين</h2>
<h3>لغة JavaScript</h3>
<h4>متغيرات JavaScript</h4>

<!-- خطأ -->
<h1>دليل شامل لتعلم البرمجة</h1>
<h4>لغة JavaScript</h4> <!-- قفز في التسلسل -->

HTML

التوصيات للتصميم

/* تخصيص العناوين العربية */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    color: #34495e;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* تخصيص العناوين العربية */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    color: #34495e;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

CSS

أهمية العناوين في SEO

فوائد SEO

تحسين الترتيب في محركات البحث
فهم أفضل للمحتوى من قبل الخوارزميات
تحسين تجربة المستخدم
زيادة معدل النقر في نتائج البحث

استراتيجيات SEO للعناوين

استخدام الكلمات المفتاحية

<!-- مثال جيد -->
<h1>أفضل طرق تعلم البرمجة للمبتدئين 2024</h1>
<h2>لغات البرمجة المطلوبة في سوق العمل</h2>

<!-- مثال ضعيف -->
<h1>مرحباً بكم</h1>
<h2>القسم الأول</h2>

<!-- مثال جيد -->
<h1>أفضل طرق تعلم البرمجة للمبتدئين 2024</h1>
<h2>لغات البرمجة المطلوبة في سوق العمل</h2>

<!-- مثال ضعيف -->
<h1>مرحباً بكم</h1>
<h2>القسم الأول</h2>

HTML

طول العناوين المناسب

H1: 20-60 حرف للعربية
H2-H6: 10-50 حرف
تجنب العناوين الطويلة جداً

البنية الدلالية

<!-- بنية SEO جيدة -->
<h1>دورة تطوير المواقع الشاملة</h1>
  <h2>أساسيات HTML و CSS</h2>
    <h3>تعلم HTML من البداية</h3>
      <h4>العناصر الأساسية في HTML</h4>
  <h2>لغة JavaScript المتقدمة</h2>
    <h3>البرمجة الكائنية في JavaScript</h3>

<!-- بنية SEO جيدة -->
<h1>دورة تطوير المواقع الشاملة</h1>
  <h2>أساسيات HTML و CSS</h2>
    <h3>تعلم HTML من البداية</h3>
      <h4>العناصر الأساسية في HTML</h4>
  <h2>لغة JavaScript المتقدمة</h2>
    <h3>البرمجة الكائنية في JavaScript</h3>

HTML

المحاذير والأخطاء الشائعة

المحاذير المهمة

تجنب استخدام العناوين للتصميم فقط

<em><!-- خطأ شائع --></em>
<h3 style="font-size: 12px;">نص صغير</h3>

<em><!-- الصحيح --></em>
<p class="small-text">نص صغير</p>

<em><!-- خطأ شائع --></em>
<h3 style="font-size: 12px;">نص صغير</h3>

<em><!-- الصحيح --></em>
<p class="small-text">نص صغير</p>

HTML

عدم قفز المستويات

<!-- خطأ -->
<h1>العنوان الرئيسي</h1>
<h4>عنوان فرعي</h4> <!-- قفز من H1 إلى H4 -->

<!-- صحيح -->
<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>

<!-- خطأ -->
<h1>العنوان الرئيسي</h1>
<h4>عنوان فرعي</h4> <!-- قفز من H1 إلى H4 -->

<!-- صحيح -->
<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>

HTML

تجنب العناوين الفارغة

<em><!-- خطأ --></em>
<h2></h2>
<h3> </h3>

<em><!-- صحيح --></em>
<h2>عنوان واضح ومفيد</h2>

<em><!-- خطأ --></em>
<h2></h2>
<h3> </h3>

<em><!-- صحيح --></em>
<h2>عنوان واضح ومفيد</h2>

HTML

الأخطاء الشائعة

استخدام H1 متعدد

<em><!-- خطأ شائع --></em>
<h1>عنوان الصفحة</h1>
<h1>عنوان آخر</h1> <em><!-- خطأ: H1 إضافي --></em>

<em><!-- الصحيح --></em>
<h1>عنوان الصفحة الرئيسي</h1>
<h2>عنوان فرعي</h2>

<em><!-- خطأ شائع --></em>
<h1>عنوان الصفحة</h1>
<h1>عنوان آخر</h1> <em><!-- خطأ: H1 إضافي --></em>

<em><!-- الصحيح --></em>
<h1>عنوان الصفحة الرئيسي</h1>
<h2>عنوان فرعي</h2>

HTML

العناوين غير الوصفية

<em><!-- خطأ --></em>
<h2>انقر هنا</h2>
<h3>المزيد</h3>

<em><!-- صحيح --></em>
<h2>خدمات التصميم الجرافيكي</h2>
<h3>تفاصيل باقات التصميم</h3>

<em><!-- خطأ --></em>
<h2>انقر هنا</h2>
<h3>المزيد</h3>

<em><!-- صحيح --></em>
<h2>خدمات التصميم الجرافيكي</h2>
<h3>تفاصيل باقات التصميم</h3>

HTML

حشو الكلمات المفتاحية

<em><!-- خطأ --></em>
<h1>تعلم البرمجة تعلم البرمجة أفضل طرق تعلم البرمجة</h1>

<em><!-- صحيح --></em>
<h1>أفضل طرق تعلم البرمجة للمبتدئين</h1>

<em><!-- خطأ --></em>
<h1>تعلم البرمجة تعلم البرمجة أفضل طرق تعلم البرمجة</h1>

<em><!-- صحيح --></em>
<h1>أفضل طرق تعلم البرمجة للمبتدئين</h1>

HTML

استخدام العناوين خارج السياق

<em><!-- خطأ --></em>
<h2>الكلمة المفتاحية</h2>
<p>محتوى غير مرتبط</p>

<em><!-- صحيح --></em>
<h2>دليل الكلمات المفتاحية</h2>
<p>محتوى مرتبط بالعنوان</p>

<em><!-- خطأ --></em>
<h2>الكلمة المفتاحية</h2>
<p>محتوى غير مرتبط</p>

<em><!-- صحيح --></em>
<h2>دليل الكلمات المفتاحية</h2>
<p>محتوى مرتبط بالعنوان</p>

HTML

أمثلة تطبيقية

مثال: صفحة مقال تقني

<article>
  <h1>دليل تطوير تطبيقات الموبايل</h1>
  
  <h2>مقدمة عن تطوير التطبيقات</h2>
  <p>محتوى المقدمة...</p>
  
  <h2>أنواع تطبيقات الموبايل</h2>
  
    <h3>التطبيقات الأصلية (Native Apps)</h3>
    <p>شرح التطبيقات الأصلية...</p>
    
      <h4>مميزات التطبيقات الأصلية</h4>
      <p>قائمة المميزات...</p>
      
      <h4>عيوب التطبيقات الأصلية</h4>
      <p>قائمة العيوب...</p>
    
    <h3>التطبيقات الهجينة (Hybrid Apps)</h3>
    <p>شرح التطبيقات الهجينة...</p>
  
  <h2>أدوات التطوير المطلوبة</h2>
  <p>قائمة الأدوات...</p>
</article>

<article>
  <h1>دليل تطوير تطبيقات الموبايل</h1>
  
  <h2>مقدمة عن تطوير التطبيقات</h2>
  <p>محتوى المقدمة...</p>
  
  <h2>أنواع تطبيقات الموبايل</h2>
  
    <h3>التطبيقات الأصلية (Native Apps)</h3>
    <p>شرح التطبيقات الأصلية...</p>
    
      <h4>مميزات التطبيقات الأصلية</h4>
      <p>قائمة المميزات...</p>
      
      <h4>عيوب التطبيقات الأصلية</h4>
      <p>قائمة العيوب...</p>
    
    <h3>التطبيقات الهجينة (Hybrid Apps)</h3>
    <p>شرح التطبيقات الهجينة...</p>
  
  <h2>أدوات التطوير المطلوبة</h2>
  <p>قائمة الأدوات...</p>
</article>

HTML

مثال: صفحة منتج

<main>
  <h1>هاتف iPhone 15 Pro Max</h1>
  
  <h2>المواصفات التقنية</h2>
  
    <h3>الشاشة والعرض</h3>
    <p>تفاصيل الشاشة...</p>
    
    <h3>الكاميرا</h3>
    <p>مواصفات الكاميرا...</p>
      
      <h4>الكاميرا الرئيسية</h4>
      <p>تفاصيل الكاميرا الرئيسية...</p>
      
      <h4>الكاميرا الأمامية</h4>
      <p>تفاصيل الكاميرا الأمامية...</p>
  
  <h2>الأسعار والباقات</h2>
  <p>تفاصيل الأسعار...</p>
</main>

<main>
  <h1>هاتف iPhone 15 Pro Max</h1>
  
  <h2>المواصفات التقنية</h2>
  
    <h3>الشاشة والعرض</h3>
    <p>تفاصيل الشاشة...</p>
    
    <h3>الكاميرا</h3>
    <p>مواصفات الكاميرا...</p>
      
      <h4>الكاميرا الرئيسية</h4>
      <p>تفاصيل الكاميرا الرئيسية...</p>
      
      <h4>الكاميرا الأمامية</h4>
      <p>تفاصيل الكاميرا الأمامية...</p>
  
  <h2>الأسعار والباقات</h2>
  <p>تفاصيل الأسعار...</p>
</main>

HTML

الخلاصة والتوصيات النهائية

النقاط المهمة للتذكر:

استخدم H1 واحد فقط لكل صفحة
حافظ على التسلسل الهرمي الطبيعي
اجعل العناوين وصفية ومفيدة للمستخدم
استخدم الكلمات المفتاحية بذكاء دون إفراط
فكر في تجربة المستخدم قبل محركات البحث

للمحتوى العربي خصوصاً:

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

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