خانه آموزش HTML آموزش تگ های HTML آموزش تگ های h1 تا h6 در HTML

آموزش تگ های h1 تا h6 در HTML

توسط

۱۳۹۸-۰۱-۱۳

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ های h1 تا h6 در HTML با من همراه باشید.

آموزش تگ های h1 تا h6 در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 تگ های H1 تا H6 در HTML
2 مثال از تگ های h1 تا h6 در HTML
3 پشتیبانی مرورگرها
4 جدول صفات تگ های h1 تا h6 در HTML
5 پشتیبانی از صفات و رویدادهای عمومی
6 نکات و توضیحات
7 دستورات CSS پیش فرض

تگ های H1 تا H6 در HTML

تگ های h1 تا h6 یا معروف به تگ های تیتر یا تگ های هدینگ ( heading ) ، از مهمترین تگ های زبان HTML برای تعریف / ایجاد عناوین یا تیترها در یک صفحه ی وب می باشد.

بطور کلی بدانید با استفاده از این تگ ها ( تگ های تیتر یا تگ های هدینگ ) میتوانیم عناوین یا تیترهای موجود در مطالب مون رو ایجاد نماییم.

بنده کمی قبلتر در یک مطلب/پست (تا جایی که نیاز بود) اینکه تگ های تیتر چه هستند و چجوری باید ازشون استفاده نمایید و همچنین نحوه استفاده از تگ های تیتر در وردپرس و… را بطور کامل آموزش دادم که پیشنهاد میکنم حتما از طریق لینک زیر این مطلب را مشاهده نمایید.

پیشنهاد میکنم آموزش کاملتر تگ های تیتر یا تگ های هدینگ را در HTML مشاهده نمایید.

Free-Learn

مثال از تگ های h1 تا h6 در HTML

در ادامه میتوانید یک مثال از این تگ ها را مشاهده نمایید.

<body>
 
<h1>Free-Learn</h1>
<h2>Free-Learn</h2>
<h3>Free-Learn</h3>
<h4>Free-Learn</h4>
<h5>Free-Learn</h5>
<h6>Free-Learn</h6>
 
</body>

<body>

<h1>Free-Learn</h1>

<h2>Free-Learn</h2>

<h3>Free-Learn</h3>

<h4>Free-Learn</h4>

<h5>Free-Learn</h5>

<h6>Free-Learn</h6>

</body>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ h1-h6 در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ های h1 تا h6 در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت	مقدار	توضیح
align	left center right justify	تراز متن یا موقعیت قرارگیری محتوای این تگ های را مشخص میکند. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ h1-h6 از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

صفت align که در جدول بالا مشاهده مینمایید برای تگ های h1-h6 در HTML5 منسوخ شده و پشتیبانی نمی شود لذا باید از CSS بجای این صفت استفاده نمایید.

مثال : استفاده از CSS بجای صفت align در تگ های تیتر

<style>

h1{ text-align:center; }
h2{ text-align:right; }

</style>

<style>

h1{ text-align:center; }

h2{ text-align:right; }

</style>

امتحان کنید

تگ های تیتر یا هدینگ یا H1-H6 ، در یک صفحه ی وب از نظر سئوی محتوایی بسیار (بسیار) مهم می باشند ، به گونه ای که موتورهای جستجوگر همچون (گوگل و..) از طریق همین تگ ها میتوانند به محتوای یک وبسایت دسترسی پیدا نمایند.

تگ های تیتر یا هدینگ در حالت پیش فرض اندازه هاشون بزرگ و پررنگ می باشند ولی به راحتی با استفاده از CSS میتوان این تگ ها را هم از نظر اندازه و هم رنگ و.. تغییر داد.

مثال : تغییر اندازه تگ های تیتر با استفاده از CSS

<style>

h1{ font-size:20px; }
h2{ font-size:18px; }
h3,h4,h5,h6{ font-size:15px; }

</style>

<style>

h1{ font-size:20px; }

h2{ font-size:18px; }

h3,h4,h5,h6{ font-size:15px; }

</style>

امتحان کنید

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ های h1 تا h6 را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

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

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;
}

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;
}

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;
}

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;
}

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;
}

h6 {

display: block;

font-size: .67em;

margin-top: 2.33em;

margin-bottom: 2.33em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

}

Free-Learn

فروشگاه فری لرن

دریافت PDF یا پرینت این مطلب