آموزش تگ h1 تا h6 در HTML - راهنمای کار با عناوین در html

تگ های h1، h2، h3، h4، h5، h6 معروف به تگ های Heading برای ایجاد تیتر یا عنوان به استفاده می شود. تگ h1 درشت تر بوده و بیشترین اهمیت را دارد و به ترتیب با ...

تگ های h1، h2، h3، h4، h5، h6 معروف به تگ های Heading برای ایجاد تیتر یا عنوان به استفاده می شود.

تگ h1 درشت تر بوده و بیشترین اهمیت را دارد و به ترتیب با کاهش اعداد از درشتی و اهمیت آن کاسته می شود. به طوری که تگ h1 بیشترین اهمیت و h6 کمترین اهمیت را دارند.

با استفاده از تگ h می توان میزان اهمیت تیترهای اصلی و فرعی را برای موتورهای جستجو تعریف کرد. معمولا تیتر اصلی که اهمیت بیشتری دارد را با h1 علامت گذاری می کنند و تیترهای فرعی را با h2 و همینطور عناوین فرعی تر را از h3 تا h6 نشانه گذاری می کنند. به این ترتیب موتورهای جستجو درجه اهمیت عناوین را تشخیص می دهند، نشانه گذاری درست در سئو محتوا و کسب رتبه بالاتر در موتورهای جستجو از اهمیت برخوردار است.

تگ h1 در هر صفحه فقط یک بار باید استفاده شود.

مثال 1:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

مثال 2: وسط چین کردن تگ های تیتر در صفحه

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

<head>
<style>

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

</style>
</head>
<body dir="rtl">

<h1>این یک تیتر است</h1>
<h2>این یک تیتر است</h2>
<h3>این یک تیتر است</h3>
<h4>این یک تیتر است</h4>
<h5>این یک تیتر است</h5>
<h6>این یک تیتر است</h6>

</body>

مثال 4: تغییر رنگ و پس زمینه تگ های تیتر

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

مثال 5: چینش تگ های تیتر

<h1 style="text-align:center">This is heading 1</h1>
<h2 style="text-align:left">This is heading 2</h2>
<h3 style="text-align:right">This is heading 3</h3>
<h4 style="text-align:justify">This is heading 4</h4>

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

تگ <h1> تا <h6> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	بله	بله	بله	بله	بله

ویژگی ها

ویژگی	مقدار	توضیحات
align	left center right justify	شیوه تراز کردن عنوان را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود.

پشتیبانی از ویژگی ها و رویدادهای عمومی

تگ <h1> تا <h6> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

دستورات 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;
}
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;
}
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;
}
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

موضوع: آموزش HTML

کلمات کلیدی: