آموزش تگ های h1 تا h6 در HTML
آموزش تگ های h1 تا h6 در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ های h1 تا h6 در HTML به صورت کامل آشنا بشید.
تگ های H1 تا h6 در HTML
تگ های H1 تا h6 به تگ های تیتر یا تگ های هدینگ ( Heading ) هم معروف هستند. کاربرد های این تگ ها برای ایجاد عناوین یا تیترها در یک صفحه ی وب می باشد.
بصورت کلی با استفاده از این تگ ها میتوانیم عناوین یا سر تیترهای مطالب را نسبت به ارزش مکانی و ارزش محتوایی آنها تنظیم کنیم.
به عنوان یک مثال خیلی شارح میتوانید به همین مقاله توجه کنید. برای نوشتن اولین خط از تگ h2 استفاده شده است. با استفاده از این این تگ تیتر را از سایر بخش ها مقاله متمایز کرده ایم.
مثال از تگ های h1 الی h6 در HTML
در ادامه دوره آموزشی html css پروژه محور به چند مثال از این تگ میپردازیم تا بیشتر با کارایی آن اشنا شوید و در کد نویسی های خود از آن استفاده کنید.
مثال اول: استفاده از تگ های h1 تا h6 بدون استفاده از کد های css
<body> <h1>سایت آموزشی وردپرس پوش</h1> <h2>سایت آموزشی وردپرس پوش</h2> <h3>سایت آموزشی وردپرس پوش</h3> <h4>سایت آموزشی وردپرس پوش</h4> <h5>سایت آموزشی وردپرس پوش</h5> <h6>سایت آموزشی وردپرس پوش</h6> </body>
دومین مثال : وسط قرار دادن تگ های H1 تا h6 در صفحه وبسایت
h1,h2,h3,h4,h5,h6{
text-align:center;
}
مثال سوم : تغییر اندازه تگ های H1 تا h6 با استفاده از کد های
CSS
h1,h2,h3,h4,h5,h6{
font-size:18px;
color:blue;
}
راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ های h1 الی h6
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ h1 تا h6 در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
نکات و توضیحات تگ های H1 تا h6 در HTML
- در حالت پیشفرض باید در هر صفحه فقط از یک تگ h1 استفاده کرد. آنهم برای عنوان اصلی.
- استفاده از تگ های تیتر
h1 تا h6، برای سئو سازی یک صفحه وبسایت بسیار حائزاهمیت است. به گونه ای که موتورهای جستجوگر همچون گوگل و… از طریق همین تگ ها میتوانند به محتوای یک وبسایت دسترسی داشته باشند. - بصورت پیش فرض تگ های تیتر اندازه بزرگ تر و پررنگ تر می باشند. این ویژگی ها ذاتی هستند و بصورت پیش فرض برای مرورگرها تعریف شده اند. اما در صورت صلاح دید به راحتی میتوانید با استفاده از کد های CSS اندازه ، رنگ و… تغییر دهید.
دستورات پیش فرض 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;
}
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید