برچسب‌های HTML <h1> تا <h6>

تعریف و استفاده

<h1> تا <h6> برچسب‌ها برای تعریف عنوان‌های HTML استفاده می‌شوند.

<h1> عنوان مهم‌ترین عنوان را تعریف کنید.<h6> عنوان کم‌اهمیت‌ترین عنوان را تعریف کنید.

توجه داشته باشید

هر صفحه فقط از یک <h1> - این باید نمای کلیدی/موضوع اصلی صفحه را نشان دهد. علاوه بر این، لطفاً از سطح عنوان جلو نروید - <h1> شروع کنید، سپس استفاده کنید <h2>، به همین ترتیب.

به دلیل اینکه عناصر h دارای معنای دقیقی هستند، لطفاً از انتخاب لایه‌های مناسب برای ساختار مستند خود دقت کنید. بنابراین، از استفاده از برچسب‌های عنوان برای تغییر اندازه فونت در یک خط خودداری کنید. به جای آن، ما باید از تعریف استایل‌های پیچیده استفاده کنیم تا به نمایش زیبای آن‌ها دست یابیم.

اگر مایلید اطلاعات بیشتری در مورد انتخاب و استفاده از برچسب‌های HTML بدست آورید، لطفاً کتابکیفیت وب》。

لطفاً به:

آموزش HTML:عنوان‌های HTML

دستورالعمل HTML DOM:عنوان

مثال

مثال 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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی