العناصر <h1>-<h6>
< HTML
تُمثِّل عناصر <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). |
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى التنظيمي.
لا تستخدم هذه العناصر ضمن العنصر |
واجهة 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.