الفرق بين المراجعتين ل"HTML/h1-h6"
< HTML
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين ومثالين) |
||
سطر 3: | سطر 3: | ||
المثال الآتي يعرض جميع مستويات الترويسات:<syntaxhighlight lang="html"> | المثال الآتي يعرض جميع مستويات الترويسات:<syntaxhighlight lang="html"> | ||
− | <h1> | + | <h1>العنوان من المستوى 1</h1> |
− | <h2> | + | <h2>العنوان من المستوى 2</h2> |
− | <h3> | + | <h3>العنوان من المستوى 3</h3> |
− | <h4> | + | <h4>العنوان من المستوى 4</h4> |
− | <h5> | + | <h5>العنوان من المستوى 5</h5> |
− | <h6> | + | <h6>العنوان من المستوى 6</h6> |
</syntaxhighlight>أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:<syntaxhighlight lang="html"> | </syntaxhighlight>أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:<syntaxhighlight lang="html"> | ||
− | <h1> | + | <h1>العناوين</h1> |
− | <h2> | + | <h2>الخلاصة</h2> |
− | <p> | + | <p>بعض النص الذي يلخص العناوين</p> |
− | <h2> | + | <h2>أمثلة</h2> |
− | <h3> | + | <h3>المثال الأول</h3> |
− | <p> | + | <p>نص المثال الأول</p> |
− | <h3> | + | <h3>المثال الثاني</h3> |
− | <p> | + | <p>نص المثال الثاني</p> |
− | <h2> | + | <h2>مصادر</h2> |
− | <p> | + | <p>موسوعة حسوب</p> |
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | ||
+ | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 67: | سطر 68: | ||
*لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية <code>font-size</code> في CSS استعمالًا صحيحًا. | *لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية <code>font-size</code> في CSS استعمالًا صحيحًا. | ||
*تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <code><nowiki><h1></nowiki></code> ثم استخدام <code><nowiki><h2></nowiki></code> وهكذا. | *تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <code><nowiki><h1></nowiki></code> ثم استخدام <code><nowiki><h2></nowiki></code> وهكذا. | ||
+ | |||
+ | == التنسيق الافتراضي == | ||
+ | تعرض أغلبية المتصفحات العناصر من <code><nowiki><h1></nowiki></code> إلى <code><nowiki><h6></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وتحديد قيم الخاصيات <code>[[CSS/font-size|font-size]]</code> (حجم الخط) و <code>[[CSS/font-weight|font-weight]]</code> (وزن أو ثخانة الخط)، إضافة إلى الهوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code>). سنعرض قواعد [[CSS]] لهذه العناصر هنا تباعًا:<syntaxhighlight lang="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; | ||
+ | } | ||
+ | </syntaxhighlight> | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== |
المراجعة الحالية بتاريخ 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). |
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى التنظيمي.
لا تستخدم هذه العناصر ضمن العنصر |
واجهة 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.