عناوين HTML <h1> إلى <h6>

تعريف الاستخدام

<h1> إلى <h6> الوسوم تستخدم لتعريف العناوين في HTML.

<h1> تعريف العنوان الأهم.<h6> تعريف العنوان الأقل أهمية.

التحذير

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

بما أن عناصر h تملك معاني محددة، يرجى اختيار مستوى العلامة المناسب لبناء بنية الوثيقة. لذا، لا يجب استخدام علامات العناوين لتغيير حجم الخط في نفس السطر. بدلاً من ذلك، يجب استخدام تعريفات النمط المتدرج لتحقيق عرض جذاب.

إذا كنت ترغب في الحصول على معلومات أكثر حول اختيار وتشغيل علامات HTML، يرجى قراءة كتاب《جودة الويب》。

يرجى الرجوع أيضًا إلى:

دليل HTML:عناوين HTML

دليل DOM HTML:مفهوم العناوين

مثال

مثال 1

ستة عناوين مختلفة في HTML:

<h1>هذا هو العنوان 1</h1>
<h2>هذا هو العنوان 2</h2>
<h3>هذا هو العنوان 3</h3>
<h4>هذا هو العنوان 4</h4>
<h5>هذا هو العنوان 5</h5>
<h6>هذا هو العنوان 6</h6>

جربها بنفسك

مثال 2

إعداد لون الخلفية ولون النص (استخدام CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

جربها بنفسك

مثال 3

إعداد تنسيق العناوين (استخدام CSS):

<h1 style="text-align:center">هذا هو العنوان 1</h1>
<h2 style="text-align:left">هذا هو العنوان 2</h2>
<h3 style="text-align:right">هذا هو العنوان 3</h3>
<h4 style="text-align:justify">هذا هو العنوان 4</h4>

جربها بنفسك

خصائص العالمية

<h1> - <h6> العلامات الداخلية تدعم خصائص العالمية في HTML。

خصائص الحدث

<h1> - <h6> العلامات الداخلية تدعم خصائص الحدث في HTML。

إعداد CSS الافتراضي

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <h1> العنصر:

مثال 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

جربها بنفسك

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <h2> العنصر:

مثال 2

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> العنصر:

مثال 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

جربها بنفسك

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <h4> العنصر:

مثال 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

جربها بنفسك

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <h5> العنصر:

مثال 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

جربها بنفسك

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <h6> العنصر:

مثال 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

جربها بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم