العناصر <h1>-<h6>
< HTML
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
تُمثِّل عناصر <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.