آموزش تگ های 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>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 در تگ های تیتر
|
1 2 3 4 5 6 |
<style> h1{ text-align:center; } h2{ text-align:right; } </style> |
تگ های تیتر یا هدینگ یا H1-H6 ، در یک صفحه ی وب از نظر سئوی محتوایی بسیار (بسیار) مهم می باشند ، به گونه ای که موتورهای جستجوگر همچون (گوگل و..) از طریق همین تگ ها میتوانند به محتوای یک وبسایت دسترسی پیدا نمایند.
تگ های تیتر یا هدینگ در حالت پیش فرض اندازه هاشون بزرگ و پررنگ می باشند ولی به راحتی با استفاده از CSS میتوان این تگ ها را هم از نظر اندازه و هم رنگ و.. تغییر داد.
مثال : تغییر اندازه تگ های تیتر با استفاده از CSS
|
1 2 3 4 5 6 7 |
<style> h1{ font-size:20px; } h2{ font-size:18px; } h3,h4,h5,h6{ font-size:15px; } </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; } |
