تیتر ها (Headings) در HTML | تگ هدینگ چیست؟
فهرست مطالب
تیتر ها (Headings) در HTML
یکی از عواملی که باعث منظمتر و جذابتر دیده شدن ساختار یا مطالب یک صفحه وب میشود و همچنین بر بهبود سئو سایت به شدت اثرگذار است، استفاده صحیح و به جا از تیتر هاست. در این پست از بلاگ ویتکس به معرفی تیترها یا همان Headings و اهمیت استفاده از آن ها در طراحی وب و زبان برنامه نویسی HTML می پردازیم. پس بار دیگر با بلاگ ویتکس همراه شوید …
تیترها (Headings) در HTML بر اساس درجه ی اهمیت و اولویت، به ترتیب ۶ سطح زیر (تگ h1 مهم ترین و تگ h6 کم اهمیت ترین) شماره گذاری میشوند:
- تگ h1
- تگ h2
- تگ h3
- تگ h4
- تگ h5
- تگ h6
مثال: تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | <html lang='fa-IR' dir='rtl'> <body> <h1>آموزش تیترها در HTML</h1> <h2>آموزش تیترها در HTML</h2> <h3>آموزش تیترها در HTML</h3> <h4>آموزش تیترها در HTML</h4> <h5>آموزش تیترها در HTML</h5> <h6>آموزش تیترها در HTML</h6> </body> </html> |
تگ h1 مهمترین و تگ h6 کم اهمیتترین تیتر در یک صفحه وب میباشد. از تگ h1 برای نمایش پراهمیتترین تیتر صفحه، و از تگ های h2 و h3 برای نمایش زیرتیترها استفاده میشود. تگ های h4 تا h6 در میان طراحان وب از محبوبیت کمتری برخوردارند و به ندرت استفاده می شوند.
تیترها یا هدینگ ها علاوه بر آنکه جهت نظم دادن به نوشتهها و ساختار صفحات شما به کار می روند، برای موتورهای جستجو و مخاطبان شما نیز اهمیت ویژهای دارند. موتورهای جستجو با استفاده از تیترهای به کار رفته در صفحه شما، ساختار آن را درک میکنند؛ بنابراین استفاده از تیترهای مرتبط با محتوا، در بهبود سئو سایت شما به شدت موثر است. همچنین تیترها به مخاطبان شما کمک میکنند تا به صورت راحتتری محتوای صفحه شما را پیدا نموده و مطالعه کنند.
چرا باید از تیتر ها استفاده کنیم؟
موتورهای جستجو به کمک تگهای h1 تا h6 که در صفحه وب به کار میروند، ساختار کلی و محتوای هر صفحه را ایندکس میکنند؛ بنابراین انتظار دارند که در کنار یک محتوای عالی یک ساختاربندی صحبح مشاهده کنند.

تغییر اندازه فونت تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5
اندازه فونت هر یک از این تگها مقداری پیشفرض است. با این حال شما می توانید با استفاده از دستور font-size در CSS، استایل آن ها را تغییر دهید :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ | <html lang="en-US" dir="ltr"> <head> <style> .custom { font-size: ۴۸px; } </style> </head> <body> <h2>Hello World!</h2> <!-- Normal Heading --> <h2 class="custom">Hello World!</h2> <!-- Custom Heading --> </body> </html> |
تگ hr
HTML Horizontal Rules یا به اختصار تگ hr، یک خط افقی است که جهت جداکردن یک تیتر و متن وابسته به آن از تیتری دیگر کاربرد دارد.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | <html lang="en" dir="ltr"> <body> <h2>This is heading 2</h2> <p>This is some text.</p> <hr> <h3>This is heading 3</h3> <p>This is some other text.</p> <hr> </body> </html> |
مرورگرهای سازگار با هدینگهای html
در جدول زیر، لیست مرورگرها و نسخه های سازگار آن ها با هدینگها در اچ تی ام ال را مشاهده می کنید:
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۱+ | ۴+ |
امیدواریم از این مقاله نهایت بهره را برده باشید … .