العناصر <h1>-<h6>

تُمثِّل عناصر <h1>‏-<h6> ستة مستويات من ترويسات الأقسام، ويكون العنصر <h1> أعلى مستوى والعنصر <h6> أدنى مستوى.

المثال الآتي يعرض جميع مستويات الترويسات:

<h1>العنوان من المستوى 1</h1>
<h2>العنوان من المستوى 2</h2>
<h3>العنوان من المستوى 3</h3>
<h4>العنوان من المستوى 4</h4>
<h5>العنوان من المستوى 5</h5>
<h6>العنوان من المستوى 6</h6>

أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:

<h1>العناوين</h1>
<h2>الخلاصة</h2>
<p>بعض النص الذي يلخص العناوين</p>

<h2>أمثلة</h2>
<h3>المثال الأول</h3>
<p>نص المثال الأول</p>

<h3>المثال الثاني</h3>
<p>نص المثال الثاني</p>

<h2>مصادر</h2>
<p>موسوعة حسوب</p>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي.
المحتوى المسموح	المحتوى الفعلي (phrasing content).
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي. لا تستخدم هذه العناصر ضمن العنصر <hgroup> لأن ذلك أصبح مهملًا (deprecated).
واجهة DOM	HTMLHeadingElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصية align قديمة ومهملة وغير مدعومة في HTML5، فلا تستعملها.

ملاحظات الاستخدام

• يمكن استخدام معلومات الترويسات من المتصفحات (وغيرها من البرمجيات) لتوليد جدول محتويات للمستند تلقائيًا
• لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية font-size في CSS استعمالًا صحيحًا.
• تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <h1> ثم استخدام <h2> وهكذا.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العناصر من <h1> إلى <h6> مع ضبط الخاصية display إلى block، وتحديد قيم الخاصيات font-size (حجم الخط) و font-weight (وزن أو ثخانة الخط)، إضافة إلى الهوامش (margin-top و margin-bottom و margin-left و margin-right). سنعرض قواعد CSS لهذه العناصر هنا تباعًا:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.