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

من موسوعة حسوب
مراجعة 04:01، 18 فبراير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة قسمين ومثالين)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

تُمثِّل عناصر <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;
}

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