آموزش Headings عنوان ها در html

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب آموزش Headings عنوان ها در html از سری آموزش های HTML در خدمت شما عزیزان هستیم.

عنوان ها (Headings) یکی از مهم ترین بخش های محتوا سازی در سئو است. یک مقاله خوب در سایت همانند سایر مقالات خوب باید دارای عناوین دسته بندی شده باشد تا مخاطب به راحتی به درک مطلب بپردازد. در این مطلب سعی داریم شما را با تگ های عنوان در html آشنا کنیم.

عنوان ها در html

عنوان ها چه تگ هایی هستند؟

عنوان ها تگ هایی هستند که برای سرتیتر و عناوین مطالب به کار گرفته می شود و نام اعضای آن h1 , h2 , h3 , h4 , h5 , h6 می باشد.

تگ h1 دارای بیشترین اهمیت و تگ h6 به عنوان کم اهمیت ترین شناخته می شود.

همواره در سئو تاکید شده از تگ های عنوان در مطالب خود استفاده کنید. این تگ ها کمک زیادی به موتور های جستجوگر بر شناسایی محتوا می کند و اگر طبق اصول از این تگ ها استفاده کرده باشید مخاطب درک بهتری از مطلب دارد.

نکته: تگ h1 بر خلاف سایر تگ های عنوان بهتر است فقط یک بار در متن استفاده شود!

کد:

<h1>جهان</h1>
<h2>قاره</h2>
<h3>کشور</h3>
<h4>استان</h4>
<h5>شهرستان</h5>
<h6>شهر</h6>

اجرا

همانطور که در مثال بالا مشاهده می کنید تگ های عنوان باید مرتبط و پشت سر هم به کار گرفته شوند.

مثلا در نکته بالا گفتیم که تگ h1 فقط یک بار باید استفاده شود و تگ ها باید ترتیب خود را رعایت کنند تا زمانی که از تگ h1 استفاده نکردید نباید از تگ h2 و ... استفاده کنید!

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ های هدینگ در اکثر مرورگرها به صورت زیر است:

تگ h1

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

تگ h2

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

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

تگ h4

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

تگ h5

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

تگ h6

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

سازگاری با مرورگرها

تگ های هدینگ با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS