هدینگ (heading) ها در HTML عنوان هایی هستند که برای بخشهای مختلف محتوای صفحات وب درنظر گرفته میشود.
عناوین یا هدینگ ها در 6 سطح مختلف توسط المان ها و تگ های <h1> تا <h6> مشخص میشوند. از <h1> برای بالاترین (یا مهمترین) سطح عنوان و از <h6> برای پایینترین سطح عنوانها استفاده میشود. به عبارت بهتر عنوان اصلی محتوای صفحه با المان <h1> و عناوین دارای سطح دوم اهمیت با المانهای <h2> مشخص میشوند. به همین ترتیب در صورت نیاز از عناوین دارای سطح سوم تا ششم استفاده میشود.
متن هر عنوان میان تگ های شروع و پایان مربوطه قرار میگیرد. به عنوان مثال برای یک عنوان سطح 2 لازم است متن عنوان مشابه با نمونه زیر میان تگ شروع <h2> و تگ پایان </h2> قرار گیرد.
<h2>Heading 2</h2>در مثال زیر میتوانید نمونهای از کد شش عنوان با سطوح مختلف همراه با نتیجه آن را مشاهده و مقایسه کنید.
See the Pen
HTML Headings by techdic (@techdic)
on CodePen.
همانطور که در مثال قبل مشاهده کردید معمولا عناوین به صورت پررنگ یا ضخیم (bold) نمایش داده میشوند. همچنین معمولا عنوان سطح 1 با اندازه بزرگتر و به همین ترتیب عنوان های سطح 6 با اندازه کوچکتری نسبت به عناوین سایر سطوح ظاهر میشوند.
در مثال زیر نمونهای دیگر از کاربرد چند هدینگ با سطوح متفاوت را برای تعیین عنوان قسمتهای مختلف صفحه مشاهده میکنید.
<h1>حذف فایل در ویندوز</h1>
<p>اینجا متنی قرار میگیرد...</p>
<h2>روشهای حذف معمولی فایل در ویندوز</h2>
<p>اینجا متنی قرار میگیرد...</p>
<h3>حذف فایل با کمک نوار ابزار یا ریبون در برنامه مدیریت فایل</h3>
<p>اینجا متنی قرار میگیرد...</p>
<h3>حذف فایل با کمک منوی راست کلیک</h3>
<p>اینجا متنی قرار میگیرد...</p>
<h3>حذف فایل با کمک میانبر صفحه کلید</h3>
<p>اینجا متنی قرار میگیرد...</p>
<h2>حذف فایل بدون انتقال به سطل زباله</h2>
<p>اینجا متنی قرار میگیرد...</p>
نتیجه کد فوق را در تصویر زیر مشاهده میکنید:
نکاتی در مورد هدینگ ها در اچتیامال
- هدینگ ها برای موتورهای جستجو از اهمیت بالایی در درک ساختار محتوای صفحه و ایندکس کردن آن برخوردار هستند. از همین رو معمولا تلاش میشود موضوع و مفاهیم اصلی در هدینگ ها بیان شود. از این عناوین برای ایجاد فهرست مطالب صفحه به صورت خودکار نیز استفاده میشود.
- هرچند هدینگ ها معمولا به صورت پررنگ و با اندازه نسبتا بزرگتری نمایش داده میشوند اما نباید از آنها برای بزرگ کردن یا تأکید روی متن معمولی استفاده کنید. به عبارت بهتر از هدینگ ها صرفا باید برای عناوین صفحه استفاده کنید.
- با وجود اینکه در مستندات HTML محدودیت خاصی وجود ندارد اما اکیدا پیشنهاد میشود تنها از یک عنوان سطح 1 (المان
<h1>) در صفحه استفاده کنید. این عنوان میبایست نمایانگر موضوع اصلی صفحه باشد. - پیشنهاد میشود سطحی از عناوین را نادیده نگیرید. برای مثال پس از عنوان سطح 1 بهتر است برای عناوین جزئیتر از یک عنوان سطح 2 استفاده کنید نه اینکه ناگهان به یک عنوان سطح 3 پرش کنید.
بازگشت به فهرست مجموعه آموزشی HTML
