تگ <section> یکی از عناصر معنایی (semantic elements) در HTML است که به ما کمک میکند محتوای صفحه را به بخشهای منطقی و قابل درک تقسیم کنیم. درست مثل فصلهای یک کتاب، هر بخش میتواند موضوعی مستقل اما مرتبط با کل صفحه داشته باشد.
🧩 تفاوت <section> با <div> و <article>
<div>: ظرف عمومی بدون معنای خاص؛ فقط برای گروهبندی و استایلدهی.<article>: برای محتوای مستقل و کامل مثل یک پست وبلاگ یا خبر.<section>: برای تقسیمبندی محتوای مرتبط به بخشهای موضوعی؛ مثل فصلها یا زیربخشها.
📄 مثال ساده
<h1>عنوان کتاب</h1>
<section>
<h1>فصل اول</h1>
<p>این پاراگرافی از فصل اول است…</p>
</section>
<section>
<h1>فصل دوم</h1>
<p>این پاراگرافی از فصل دوم است…</p>
</section>
📌 هر فصل داخل یک <section> قرار گرفته و ساختار صفحه واضحتر شده است.
🔄 تو در تو بودن (Nesting)
میتوانیم بخشها را داخل هم قرار دهیم، مثل فصل و زیرفصل:
<section>
<h1>فصل دوم</h1>
<p>متنی دربارهی فصل دوم…</p>
<section>
<h1>زیربخش فصل دوم</h1>
<p>محتوای مربوط به زیربخش…</p>
</section>
</section>
🧠 ارتباط <section> با هدینگها
- هر
<section>باید یک عنوان (heading) داشته باشد. - حتی اگر همهی عنوانها
<h1>باشند، مرورگر و ابزارهای دسترسپذیری جایگاهشان را بر اساس تو در تو بودن بخشها مشخص میکنند. - یعنی یک
<h1>داخل یک<section>معادل معنایی با<h2>است، و همینطور ادامه پیدا میکند.
⚠️ نکته مهم
- بعضی توسعهدهندگان ترجیح میدهند از هدینگهای h1 تا h6 برای سلسلهمراتب استفاده کنند.
- بعضی دیگر از
<section>برای ساختاردهی معنایی بهره میبرند. - مهمترین اصل: ثبات و نظم در کل پروژه.
🎯 جمعبندی
- از
<section>برای تقسیمبندی محتوای مرتبط استفاده کنید. - هر بخش باید یک عنوان داشته باشد.
- میتوانید بخشها را تو در تو قرار دهید تا ساختار سلسلهمراتبی ایجاد شود.
- هدف اصلی: محتوای قابل درک برای کاربر و مرورگر، و دسترسیپذیری بهتر.