ایجاد هدینگ‌ها در صفحات وب

مقدمه

این درس به تیترها و عناوین یا همان هدینگ‌ها (headings) در صفحات وب اختصاص دارد. در HTML شش عنصر هدینگ با نام‌های h1، h2، h3، h4، h5 و h6 وجود دارد که هر یک برای ایجاد هدینگ با سطح مشخصی کاربرد دارند. h1 عنصری است که برای ایجاد عنوان اصلی یا هدینگ با بالاترین سطح کاربرد دارد. هدینگ‌ها عناصر بسیار مهمی هستند و در این درس با روش استفاده‌ی صحیح از آنها آشنا خواهیم شد.

تعریف هدینگ‌ها در HTML

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

فرض کنید قصد انتشار یک داستان را داشته باشیم. در این صورت، می‌توانیم عنصر h1 را برای عنوان اصلی داستان، عنصر h2 را برای عنوان هر فصل و عنصر h3 را برای عناوین زیربخش‌های هر فصل استفاده کنیم و به همین ترتیب، تا هر سطحی از سطوح شش‌گانه‌ی عناصر هدینگ را که لازم داشته باشیم، به کار بگیریم. مثال زیر را ببینید:

HTML

<h1>Functions</h1>
<h2>Algebraic Functions</h2>
<h3>Polynomial Functions</h3>
<h3>Rational Functions</h3>
<h2>Transcendental Functions</h2>
<h3>Trigonmetric Functions</h3>
<h4>Inverse Trigonometric Functions</h4>
<h3>Logarithmic Functions</h3>

صفحه‌ی مثال بالا قرار است حاوی مطالبی در مورد مفهوم توابع (functions) و انواع آن در حسابان (calculus) باشد. عنوان اصلی صفحه را با استفاده از یک عنصر h1 مشخص کرده‌ایم و از دو عنصر h2 برای عناوین مربوط به توابع جبری و متعالی (غیر جبری) استفاده کرده‌ایم. در مورد توابع جبری، دو عنصر h3 برای عناوین مربوط به توابع چندجمله‌ای و توابع گویا که از انواع توابع جبری محسوب می‌شوند، به کار گرفته شده و برای توابع غیر جبری نیز یک عنصر h3 برای توابع مثلثاتی و یک عنصر h4 برای توابع مثلثاتی معکوس استفاده شده است. یک عنصر h3 نیز برای توابع لگاریتمی که مثل توابع مثلثاتی نوعی از توابع غیر جبری هستند، استفاده شده است.

البته توجه داشته باشید که عناصر هدینگ لزوماً‌ فرزندان مستقیم body نیستند و می‌توانند متعلق به یک بخش یا ناحیه از سند (مانند article) باشند که در این صورت، عناوین همان بخش‌ها محسوب می‌شوند.

نکات مربوط به عناصر هدینگ

به طور کلی، تصمیم‌گیری در مورد نحوه‌ی استفاده از عناصر هدینگ در صفحه، کاملاً به ساختار صفحه بستگی دارد اما نکات زیر معمولاً باید در هر موردی رعایت شود:

ترجیحاً فقط از یک عنصر h1 در صفحه استفاده کنید که عنوان کلی صفحه را ارائه می‌دهد.
اگر در صفحه بیش از سه سطح از عناصر هدینگ را به کار گرفته باشیم، احتمالاً باید در طراحی ساختار صفحه تجدید نظر کنیم و مطالب را در بیش از یک صفحه قرار دهیم.
همیشه سعی کنید ترتیب عناصر هدینگ را حفظ کنید. یعنی ابتدا h1 و بعد h2 و الی آخر را در صفحه به کار بگیرید. کاربرانی که از نرم‌افزارهای صفحه‌خوان (screen reader) استفاده می‌کنند، از یک تکنیک معمول در این نرم‌افزارها به نام jumping استفاده می‌کنند تا بین تیترهای صفحه جابجا شده و یک دید کلی از محتوای صفحه به‌دست بیاورند. اما اگر در حین این کار به چیزی شبیه کدهای زیر برسند، دچار سردرگمی خواهند شد:

HTML

<h1>Heading Level 1</h1>
....

<h3>Heading Level 3</h3>
....

<h4>Heading Level 4</h4>

دلیل این سردرگمی این است که از عنصر h2 در صفحه صرف‌نظر شده است و کاربر انتظار پرش از عنصر h1 به h3 را ندارد.

اهمیت عناصر هدینگ

متنی که درون یک عنصر هدینگ مانند h1 قرار می‌گیرد، به صورت ضخیم (bold) و با سایزی بزرگتر از سایز متون عادی نشان داده می‌شود و این به خاطر استایل‌های پیش‌فرض مرورگرهاست که طوری تعریف شده‌اند که تیترهای مطالب، مطابق انتظار کاربران، بزرگتر نمایش داده شوند. این استایل‌های پیش‌فرض را می‌توان با استفاده از CSS تغییر داد. اما وجه مهم عناصر هدینگ، وجه یا جنبه‌ی معنایی این عناصر است. محتوای متنی یک عنصر هدینگ، فارغ از ظاهری که برای آن تعیین می‌شود، همیشه به عنوان هدینگ یا تیتر مطالب در نظر گرفته می‌شود. وقتی یک موتور جستجو یا یک ابزار صفحه‌خوان به یک عنصر هدینگ می‌رسد، محتوای آن را به عنوان هدینگ در نظر می‌گیرد و کاری به فونت و سایز آن ندارد. به عبارت دیگر، از نظر این مفسرها تیترها یا عناوین مطالب، متونی هستند که درون عناصر h1 تا h6 قرار گرفته‌اند نه عناصری که مثلاً فونت بزرگتری دارند.

به علاوه، وقتی کاربري در جستجوي مطلبی به سایت شما هدایت می‌شود، معمولاً نگاهی گذرا به تیترهاي صفحه می‌اندازد تا ببیند می‌تواند در این صفحه، مطلب مورد نظرش را پیدا کند یا خیر. پس، اولاً سعی کنید همواره از تیترهای متناسب با محتوای صفحه استفاده کنید و ثانیاً هیچ‌وقت از عناصر هدینگ صرفاً برای بزرگ کردن سایز متن یا ضخیم کردن متن استفاده نکنید. انجام چنین کاری باعث می‌شود که موتورهای جستجو در تشخیص عناوین مطالب شما به اشتباه بیفتند و در نتیجه نتوانند به خوبی محتوای صفحه‌ی شما را درک کنند. اگر قصد بزرگ یا ضخیم کردن متنی را دارید، راه حل، استفاده از CSS است.

ایجاد هدینگ چندسطحی

در نسخه‌های قبلی HTML یک عنصر دیگر مرتبط با هدینگ‌ها با نام hgroup نیز وجود داشت که نامش نشان می‌دهد که برای گروه‌بندی عناصر هدینگ به کار می‌رفت. اما از سال 2013 این عنصر از مستندات W3C کنار گذاشته شد و با وجودی که در حال حاضر توسط WHATWG همچنان از این عنصر پشتیبانی می‌شود، بهتر است آن را به کار نگیرید.