این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ های h1 تا h6 در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ های h1 تا h6 در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ های H1 تا H6 در HTML
تگ های h1 تا h6 یا معروف به تگ های تیتر یا تگ های هدینگ ( Heading ) ، از مهمترین تگ های زبان HTML برای ایجاد عناوین یا تیترها در یک صفحه ی وب می باشد.
بطور کلی بدانید با استفاده از این تگ ها میتونیم عناوین یا تیترهای موجود در مطالب مون رو به نسبت ارزش مکانی و ارزش محتوایی ایجاد نماییم.
بنده کمی قبلتر در یک مطلب ( تا جایی که نیاز بود ) اینکه تگ های تیتر چه هستند و چجوری باید ازشون استفاده نمایید را بطور کامل آموزش دادم که پیشنهاد میکنم حتما از طریق لینک زیر این مطلب را مشاهده نمایید.
پیشنهاد میکنم آموزش کاملتر تگ های تیتر یا تگ های هدینگ را در HTML مشاهده نمایید.
Free-Learn
مثال از تگ های h1 تا h6 در HTML
در ادامه میتوانید یک مثال از این تگ ها را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <h1>سایت آموزشی فری لرن</h1> <h2>سایت آموزشی فری لرن</h2> <h3>سایت آموزشی فری لرن</h3> <h4>سایت آموزشی فری لرن</h4> <h5>سایت آموزشی فری لرن</h5> <h6>سایت آموزشی فری لرن</h6> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ h1-h6 در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ h1-h6 از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- در هر صفحه فقط باید از یه دونه h1 استفاده کرد، که اونم باید عنوان اصلی یا حرف حسابمون باشه ( مثلا من میخوام یه مطلب بنویسم در مورد صفت style ، پس باید داخل h1 بنویسم آموزش صفت style )
- استفاده از تگ های تیتر H1 تا H6 ، در یک صفحه ی وب از نظر سئوی محتوایی بسیار (بسیار) مهم می باشند ، به گونه ای که موتورهای جستجوگر ( مثه گوگل و.. ) از طریق همین تگ ها میتوانند به محتوای یک وبسایت دسترسی پیدا نمایند.
- تگ های تیتر بصورت پیش فرض اندازه هاشون بزرگ و پررنگ می باشند، این بزرگ بودن ذاتی هست و بصورت پیش فرض برای مرورگرها تعریف شدس، ولی خب به راحتی با استفاده از CSS میتونیم اندازه ، رنگ و… تغییر بدیم.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : وسط قرار دادن تگ های تیتر در صفحه
|
1 2 3 4 5 6 7 |
<style> h1,h2,h3,h4,h5,h6{ text-align:center; } </style> |
مثال شماره ۲ : تغییر اندازه تگ های تیتر با استفاده از CSS
|
1 2 3 4 5 6 7 8 |
<style> h1,h2,h3,h4,h5,h6{ font-size:18px; color:blue; } </style> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ های h1 تا h6 را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 |
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 |
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 |
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 |
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 |
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
