Headings: نردبان اهمیت محتوای صفحه
حالا که ساختار کلی سند رو کامل بلدی، وقتشه وارد محتوای واقعی داخل body بشیم. اولین و شاید مهمترین عنصری که برای سازماندهی متن استفاده میشه، تگهای عنوان یا Headings هستن؛ یعنی h1 تا h6. تو این درس کامل میبینیم این شش تگ چطور کار میکنن و چرا ترتیب استفادهشون اینقدر مهمه.
Heading چیه؟
تگهای heading برای مشخصکردن عنوانها و زیرعنوانهای یک صفحه استفاده میشن. HTML شش سطح مختلف از این تگها رو ارائه میده:
<h1>عنوان سطح یک</h1>
<h2>عنوان سطح دو</h2>
<h3>عنوان سطح سه</h3>
<h4>عنوان سطح چهار</h4>
<h5>عنوان سطح پنج</h5>
<h6>عنوان سطح شش</h6>h1 بزرگترین و مهمترین سطح عنوان محسوب میشه، و هرچه به سمت h6 بریم، سطح اهمیت و اندازهی پیشفرض متن کوچیکتر میشه. مرورگرها بهصورت پیشفرض این تگها رو با اندازهی فونت متفاوت نمایش میدن، اما نکتهی مهمتر اینه که این تگها فقط برای «بزرگکردن متن» نیستن؛ اونا معنای ساختاری و سلسلهمراتبی دارن.
چرا نباید heading رو فقط برای بزرگنمایی استفاده کرد؟
یه اشتباه خیلی رایج اینه که برنامهنویسهای تازهکار، از h1 یا h2 فقط برای این استفاده میکنن که یه متن رو بزرگتر و پررنگتر نشون بدن، بدون اینکه اون متن واقعاً یه «عنوان» باشه. این کار اشتباهه، چون heading ها معنای ساختاری دارن؛ یعنی به مرورگر، گوگل و صفحهخوانها میگن «این بخش، سرفصل یک قسمت جدید از محتواست». اگه فقط برای بزرگنمایی بخوای از یه متن استفاده کنی، باید از CSS استفاده کنی، نه heading.
ساختار سلسلهمراتبی صحیح
یه صفحه باید مثل فهرست یک کتاب، ساختار منظم و سلسلهمراتبی داشته باشه. معمولاً باید فقط یک h1 در هر صفحه داشته باشیم که عنوان اصلی محتوای اون صفحهست، و بعد بر اساس نیاز، از h2 برای بخشهای اصلی، h3 برای زیربخشهای هر h2، و به همین ترتیب پایینتر بریم:
<h1>آموزش آشپزی ایرانی</h1>
<h2>غذاهای اصلی</h2>
<h3>قورمه سبزی</h3>
<h3>فسنجان</h3>
<h2>دسرها</h2>
<h3>شلهزرد</h3>بیا این ساختار رو بررسی کنیم: h1 عنوان کلی صفحهست (آموزش آشپزی ایرانی). زیرش دو تا h2 داریم که دو بخش اصلی محتوا رو مشخص میکنن (غذاهای اصلی و دسرها). زیر هر h2، چند تا h3 داریم که زیربخشهای همون قسمت هستن (مثل قورمه سبزی زیر غذاهای اصلی). این دقیقاً همون منطقیه که تو فهرست یه کتاب هم میبینی.
خروجی این کد چیه؟
اگه این کد رو تو مرورگر باز کنی، «آموزش آشپزی ایرانی» با بزرگترین فونت نمایش داده میشه، «غذاهای اصلی» و «دسرها» با فونت کمی کوچیکتر ولی هنوز برجسته، و «قورمه سبزی»، «فسنجان» و «شلهزرد» با فونت کوچیکتر از اونها. این تفاوت اندازه به کاربر کمک میکنه بهسرعت بفهمه کدوم بخشها مهمتر و کدومها زیرمجموعهی بخش دیگهای هستن.
اشتباه رایج: پرش از سطوح
یه قانون مهم اینه که نباید از یه سطح مستقیم به یه سطح خیلی پایینتر پرش کرد، مثلاً از h2 مستقیم به h5:
<!-- اشتباه -->
<h1>عنوان اصلی</h1>
<h2>بخش اول</h2>
<h5>یک زیربخش</h5>هرچند مرورگر همچنان این کد رو اجرا میکنه و خطایی نمیده، اما این کار ساختار معنایی سند رو خراب میکنه؛ چون صفحهخوانها و گوگل انتظار یه ترتیب منطقی و پیوسته دارن، نه پرش ناگهانی از سطح ۲ به سطح ۵.
آیا میشه چند تا h1 تو یک صفحه داشت؟
از نظر فنی، HTML5 اجازه میده چند تا h1 تو یک صفحه باشه (مخصوصاً وقتی از تگهای معنایی مثل article استفاده میکنی که تو فصل ۸ باهاشون آشنا میشیم). اما بهعنوان یه قاعدهی کلی و امن برای صفحات معمولی، بهتره فقط یک h1 در هر صفحه داشته باشیم که نمایندهی موضوع اصلی همون صفحهست.
چند اشتباه رایج
- استفاده از heading فقط برای بزرگ و پررنگنشوندادن متن، بدون اینکه اون متن واقعاً یه عنوان باشه.
- پرش ناگهانی از یه سطح به سطح خیلی پایینتر (مثلاً h2 به h5).
- استفاده از چند h1 در یک صفحهی معمولی بدون دلیل ساختاری مشخص.
- فراموشکردن ترتیب منطقی و استفادهی تصادفی از سطوح مختلف heading.
بهترین روشها
- فقط یک h1 در هر صفحه استفاده کن که نمایندهی عنوان اصلی محتوای همون صفحه باشه.
- سطوح heading رو به ترتیب و بدون پرش استفاده کن (h1 سپس h2 سپس h3 و به همین ترتیب).
- برای بزرگ یا پررنگکردن صرفاً ظاهری متن، همیشه از CSS استفاده کن، نه از heading.
نکتهی سئو
تگ h1 یکی از قویترین سیگنالهای ساختاری برای گوگل محسوب میشود و به موتور جستجو کمک میکند موضوع اصلی صفحه را سریع تشخیص دهد. ساختار منظم و سلسلهمراتبی h2 تا h6 نیز به گوگل کمک میکند ارتباط منطقی بین بخشهای مختلف محتوا را بهتر درک کند.
نکتهی دسترسیپذیری
کاربران صفحهخوان معمولاً از قابلیتی به نام «پرش بین heading ها» استفاده میکنند تا سریع بین بخشهای مختلف صفحه جابهجا شوند، بدون اینکه مجبور باشند کل متن را گوش کنند. اگر ساختار heading ها نامنظم یا ناقص باشد، این قابلیت برای کاربر کمبینا عملاً بیفایده یا گیجکننده میشود.
جمعبندی
تگهای h1 تا h6 ابزار اصلی ساخت سلسلهمراتب معنایی محتوا در HTML5 هستند. h1 مهمترین و کلیترین عنوان صفحه است و سطوح پایینتر برای بخشها و زیربخشها استفاده میشوند. رعایت ترتیب منطقی این سطوح، بدون پرش و بدون استفادهی صرفاً ظاهری، هم برای سئو و هم برای دسترسیپذیری صفحه حیاتی است.