اچ تی ام ال (HTML)برنامه نویسیطراحی سایتفرانت اند (Front-end)

تیتر ها (Headings) در HTML | تگ هدینگ چیست؟

تیتر ها (Headings) در HTML

یکی از عواملی که باعث منظم‌تر و جذاب‌تر دیده شدن ساختار یا مطالب یک صفحه وب می‌شود و همچنین بر بهبود سئو سایت به شدت اثرگذار است، استفاده صحیح و به جا از تیتر هاست. در این پست از بلاگ ویتکس به معرفی تیترها یا همان Headings و اهمیت استفاده از آن ها در طراحی وب و زبان برنامه نویسی HTML می پردازیم. پس بار دیگر با بلاگ ویتکس همراه شوید …

تیترها (Headings) در HTML بر اساس درجه ی اهمیت و اولویت، به ترتیب ۶ سطح زیر (تگ h1 مهم ترین و تگ h6 کم اهمیت ترین) شماره گذاری می‌شوند:

  1. تگ h1
  2. تگ h2
  3. تگ h3
  4. تگ h4
  5. تگ h5
  6. تگ h6

 

مثال: تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5

نمایش خروجی!

تگ h1 مهم‌ترین و تگ h6 کم اهمیت‌ترین تیتر در یک صفحه وب می‌باشد. از تگ h1 برای نمایش پراهمیت‌ترین تیتر صفحه، و از تگ های h2 و h3 برای نمایش زیرتیترها استفاده می‌شود. تگ های h4 تا h6 در میان طراحان وب از محبوبیت کمتری برخوردارند و به ندرت استفاده می شوند.

برخی از مرورگرهای وب جهت خوانایی بیشتر، به صورت پیشفرض به بالا و پایین تیترهای HTML مقداری فضای خالی (Margin) اضافه می کنند که البته می توانید با اِعمال CSS این روال را تغییر دهید.

تیترها یا هدینگ ها علاوه بر آنکه جهت نظم دادن به نوشته‌ها و ساختار صفحات شما به کار می روند، برای موتورهای جستجو و مخاطبان شما نیز اهمیت ویژه‌ای دارند. موتورهای جستجو با استفاده از تیترهای به کار رفته در صفحه شما، ساختار آن را درک می‌کنند؛ بنابراین استفاده از تیترهای مرتبط با محتوا، در بهبود سئو سایت شما به شدت موثر است. همچنین تیترها به مخاطبان شما کمک می‌کنند تا به صورت راحت‌تری محتوای صفحه شما را پیدا نموده و مطالعه کنند.

 

چرا باید از تیتر ها استفاده کنیم؟

موتورهای جستجو به کمک تگ‌های h1 تا h6 که در صفحه وب به کار می‌روند، ساختار کلی و محتوای هر صفحه را ایندکس می‌کنند؛ بنابراین انتظار دارند که در کنار یک محتوای عالی یک ساختاربندی صحبح مشاهده کنند.

طبق استاندارد سازمان W3C، ساختار صحیح چینش تیترها ساختاری است که سلسله مراتبی باشد؛ یعنی نحوه قرارگیری تیترها از ابتدا تا انتهای صفحه به صورت زیر باشد :
طرز صحیح استفاده از تیتر ها (headings) در html
طرز صحیح استفاده از تیتر ها (headings) در html
به شما اکیداً توصیه می‌کنیم که در طراحی صفحات وب، ساختار سلسله مراتبی صحیحی را برای استفاده از تیترها رعایت کنید :
به هیچ وجه از هدینگ ها جهت پررنگ (bold) کردن یا بزرگ‌تر کردن اندازه یک “متنی که تیتر نیست” استفاده نکنید!

 

تغییر اندازه فونت تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5

اندازه فونت هر یک از این تگ‌ها مقداری پیشفرض است. با این حال شما می توانید با استفاده از دستور font-size در CSS، استایل آن ها را تغییر دهید :

نمایش خروجی!

تگ hr

HTML Horizontal Rules یا به اختصار تگ hr، یک خط افقی است که جهت جداکردن یک تیتر و متن وابسته به آن از تیتری دیگر کاربرد دارد.

نمایش خروجی!

مرورگرهای سازگار با هدینگ‌‌های html

در جدول زیر، لیست مرورگرها و نسخه های سازگار آن ها با هدینگ‌‌ها در اچ تی ام ال را مشاهده می کنید:

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۱+ ۴+

امیدواریم از این مقاله نهایت بهره را برده باشید … .

درباره نویسنده

محمد جاودانی

کارشناس مهندسی نرم افزار، برنامه نویس حوزه پایتون و جاوااسکریپت و علاقه مند به تولید محتوا

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا