مرجع عناصر HTML : عنصر های <h1>-<h6>
عناصر HTML از <h1> تا <h6> شش سطح از سرتیترهای بخش را نشان میدهند. <h1> بالاترین سطح بخش و <h6> پایینترین سطح است. به طور پیشفرض، همه عناصر عنوان یک کادر سطح بلوک در طرح ایجاد میکنند که از یک خط جدید شروع میشوند و کل عرض موجود در بلوک حاوی خود را اشغال میکنند.
این عناصر فقط شامل ویژگیهای سراسری (global attributes) میشوند.
- اطلاعات عنوان میتواند توسط مرورگرها برای ساخت خودکار فهرست مطالب برای یک سند استفاده شود.
- از عناصر عنوان برای تغییر اندازه متن استفاده نکنید. در عوض، از ویژگی font-size در CSS استفاده کنید.
- سطوح عنوان را نادیده نگیرید: همیشه از شروع کنید، به دنبال آن و غیره.
از استفاده از چندین عنصر <h1> در یک صفحه خودداری کنید
اگرچه استفاده از چندین عنصر در یک صفحه طبق استاندارد HTML مجاز است (تا زمانی که تو در تو نباشند)، اما این یک روش بهینه محسوب نمیشود. یک صفحه معمولاً باید یک عنصر داشته باشد که محتوای صفحه را توصیف کند (مشابه عنصر سند).
تو در تو کردن چندین عنصر در عناصر بخشبندی تو در تو در نسخههای قدیمیتر استاندارد HTML مجاز بود. با این حال، این هرگز یک روش بهینه در نظر گرفته نمیشد و اکنون غیر منطبق است. برای اطلاعات بیشتر به بخش «الگوریتم طرح کلی سند وجود ندارد» مراجعه کنید.
ترجیح دهید فقط از یک در هر صفحه استفاده کنید و عنوانها را بدون پرش از سطوح، تو در تو کنید.
تعیین اندازه فونت یکنواخت برای <h1>
قبل از ماه مه ۲۰۲۵، استاندارد HTML مشخص کرده بود که عناصر در یک عنصر یا باید به صورت (اندازه فونت کوچکتر با حاشیه تنظیم شده) یا به صورت در صورت تو در تو بودن در سطح دیگری و غیره نمایش داده شوند. این سبک پیشفرض ویژه وابسته به متن اکنون حذف شده است.
برای اطمینان از نمایش ثابت برای مرورگرهایی که سبک پیشفرض قدیمی وابسته به متن را پیادهسازی میکنند، از قانون سبک زیر استفاده کنید:
به عنوان یک روش جایگزین، برای جلوگیری از بازنویسی سایر قوانین سبکدهی که را هدف قرار میدهند، میتوانید از استفاده کنید که هیچ ویژگی خاصی ندارد:
یک تکنیک ناوبری رایج برای کاربران نرمافزارهای خواندن صفحه، پرش سریع از یک عنوان به عنوان دیگر برای تعیین محتوای صفحه است. به همین دلیل، مهم است که یک یا چند سطح عنوان را از قلم نیندازید. انجام این کار ممکن است باعث سردرگمی شود، زیرا شخصی که از این طریق پیمایش میکند، ممکن است از خود بپرسد عنوان گم شده کجاست.
این کار را نکنید:
سرتیترها ممکن است به صورت زیربخشهایی تو در تو باشند تا سازماندهی محتوای صفحه را نشان دهند. اکثر صفحهخوانها همچنین میتوانند فهرستی مرتب از تمام سرتیترهای یک صفحه ایجاد کنند که میتواند به فرد کمک کند تا به سرعت سلسله مراتب محتوا را تعیین کرده و به سرتیترهای مختلف پیمایش کند.
با توجه به ساختار صفحه زیر:
یکی دیگر از تکنیکهای رایج ناوبری برای کاربران نرمافزارهای خواندن صفحه، ایجاد فهرستی از محتوای بخشبندی شده و استفاده از آن برای تعیین طرحبندی صفحه است.
محتوای بخشبندی شده را میتوان با استفاده از ترکیبی از ویژگیهای aria-labelledby و id برچسبگذاری کرد، به طوری که برچسب به طور خلاصه هدف بخش را توصیف کند. این تکنیک برای موقعیتهایی مفید است که بیش از یک عنصر بخشبندی در یک صفحه وجود دارد.
کد زیر تمام سطوح عنوان را در حال استفاده نشان میدهد.
کد زیر چند عنوان را به همراه محتوایی در زیر آنها نشان میدهد.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, heading content, palpable content. |
| محتوای مجاز | Phrasing content. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جریان را میپذیرد. |
| نقش ضمنی ARIA | heading |
| نقشهای مجاز ARIA | tab, presentation یا none |
| رابط DOM | HTMLHeadingElement |
