عناوين HTML

هناك 6 مستويات للعناوين في لغة HTML والتي يمكنك استخدامها في صفحة الويب ، وتبدأ من عنصر <h1> حتى عنصر <h6> ، وكل مستوى من هذه العناوين يظهر بحجم خط معين ويبدأ من الخط الأكبر حتى الخط الأصغر أكبرها حجما وأهمها <h1> وأصغرها حجما وأقل أهمية للعناوين <h6>

يتم استخدام العناوين لتنظيم المحتوى فإذا كنت تقرأ في قصة أو في كتاب أو مجلة ستجد أن هناك بعض العناوين تظهر بشكل بارز وبخط أكبر وعريض وبينما تظهر عناوين أخرى فرعية بخط أقل بقليل من العنوان الرئيسي وهذا يجعل المحتوى منظم ، مثلا يمكن استخدام عنصر <h1> لعنوان القصة وهذا سوف يظهر بحجم خط كبير وعريض ويمكن استخدام عنصر <h2> لعنوان الفصل مثلا ويمكن استخدام عنصر <h3> لعنوان الفقرة وهكذا مع بقية العناصر الأخرى الخاصة بالعناوين

الكود


<h1>عنون المستوى الأول</h1>
<h2>عنوان المستوى الثاني</h2>
<h3>عنوان المستوى الثالث</h3>
<h4>عنوان المستوى الرابع</h4>
<h5>عنوان المستوى الخامس</h5>
<h6>عنوان المستوى السادس</h6>

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


h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}