عناصر section و article

section و article: دو تگی که خیلی‌ها باهاشون اشتباه می‌گیرن

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

section چیه؟

<section>
  <h2>ویژگی‌های محصول</h2>
  <p>این محصول دارای باتری با دوام بالا و طراحی سبک است.</p>
</section>

تگ section یه بخش موضوعی مستقل از یه سند رو مشخص می‌کنه؛ یعنی یه گروه از محتوا که حول یه موضوع مشترک می‌چرخن و معمولاً یه heading مخصوص به خودشون دارن. section بیشتر به این معناست: «این بخش، یه فصل یا زیربخش موضوعی از یه محتوای بزرگ‌تره».

article چیه؟

<article>
  <h2>آموزش کامل HTML5</h2>
  <p>در این مقاله، مبانی HTML5 را از صفر آموزش می‌دهیم...</p>
</article>

تگ article یه محتوای کاملاً مستقل و خودکفا رو مشخص می‌کنه؛ یعنی محتوایی که از نظر معنایی می‌تونه به‌تنهایی، جدا از بقیه‌ی صفحه، توزیع یا منتشر بشه و همچنان معنای کامل و مستقل خودش رو حفظ کنه. مثال‌های کلاسیکش: یه پست وبلاگ، یه خبر، یه نظر کاربر، یا یه کامنت.

تست کلیدی برای تشخیص تفاوت: «آیا این محتوا به‌تنهایی هم معنا داره؟»

بهترین راه برای تشخیص اینکه باید از section استفاده کنی یا article، پرسیدن این سؤاله: اگه این بخش رو از بافت اطرافش جدا کنم و مثلاً تو یه فید RSS یا یه اپلیکیشن دیگه منتشرش کنم، آیا همچنان معنای کامل و مستقلی داره؟

• اگه جواب «بله» باشه (مثل یه پست وبلاگ کامل)، از article استفاده کن.
• اگه جواب «نه» باشه (مثل یه بخش از یه صفحه که فقط تو بافت خودش معنا داره، مثل «ویژگی‌های محصول» که بدون بقیه‌ی صفحه‌ی محصول ناقصه)، از section استفاده کن.

یه مثال ترکیبی: article داخل section، یا section داخل article؟

<section>
  <h2>آخرین مقالات وبلاگ</h2>

  <article>
    <h3>آموزش HTML5</h3>
    <p>خلاصه‌ی مقاله...</p>
  </article>

  <article>
    <h3>آموزش CSS3</h3>
    <p>خلاصه‌ی مقاله...</p>
  </article>
</section>

تو این مثال، یه section داریم که موضوع کلیش «آخرین مقالات وبلاگ»ه، و داخلش چند تا article مستقل قرار گرفته (هر مقاله می‌تونه به‌تنهایی هم منتشر بشه و معنا داشته باشه). این ترکیب خیلی رایجه: section برای گروه‌بندی موضوعی، article برای هر واحد مستقل داخل اون گروه.

برعکسش هم ممکنه: یه article می‌تونه داخلش چند section داشته باشه، وقتی خودِ اون article طولانیه و به بخش‌های موضوعی مختلف تقسیم شده:

<article>
  <h2>راهنمای کامل خرید لپ‌تاپ</h2>

  <section>
    <h3>پردازنده</h3>
    <p>توضیحات درباره‌ی پردازنده...</p>
  </section>

  <section>
    <h3>حافظه رم</h3>
    <p>توضیحات درباره‌ی رم...</p>
  </section>
</article>

تو این مثال، کل مقاله («راهنمای کامل خرید لپ‌تاپ») یه article مستقله، اما داخلش به چند section موضوعی (پردازنده، رم) تقسیم شده که هرکدوم فقط تو بافت همون مقاله معنا دارن، نه مستقل از اون.

قانون مهم: section و article هرکدوم معمولاً باید یه heading داشته باشن

یه قانون توصیه‌شده (نه اجباری، اما خیلی مهم) اینه که هر section یا article باید معمولاً یه heading (h1 تا h6) داخلش داشته باشه که موضوع اون بخش رو مشخص کنه. اگه یه بخش از محتوا هیچ heading مستقلی نداره، احتمالاً section یا article مناسبی نیست و بهتره از div ساده استفاده بشه.

<!-- نامناسب: section بدون heading -->
<section>
  <p>این متن هیچ عنوان مستقلی ندارد.</p>
</section>

<!-- بهتر: استفاده از div وقتی heading مستقلی وجود نداره -->
<div>
  <p>این متن هیچ عنوان مستقلی ندارد.</p>
</div>

اشتباه رایج: استفاده از section به‌جای div برای هر گروه‌بندی ظاهری

خیلی‌ها section رو صرفاً به‌عنوان یه جایگزین «مدرن‌تر» برای div استفاده می‌کنن، بدون توجه به معنای واقعیش:

<!-- استفاده‌ی نادرست -->
<section class="button-wrapper">
  <button>تأیید</button>
  <button>انصراف</button>
</section>

این یه گروه‌بندی صرفاً ظاهری از دو دکمه‌ست، نه یه «بخش موضوعی مستقل» با یه هدف معنایی مشخص؛ اینجا div انتخاب درست‌تریه.

یه مثال کامل و واقعی از یه صفحه‌ی خبری

<main>
  <article>
    <header>
      <h1>افتتاح نمایشگاه بین‌المللی کتاب</h1>
      <p>تاریخ: ۲۰ اردیبهشت ۱۴۰۳</p>
    </header>

    <section>
      <h2>جزئیات برگزاری</h2>
      <p>این نمایشگاه از امروز در محل دائمی نمایشگاه‌های تهران آغاز شد...</p>
    </section>

    <section>
      <h2>واکنش ناشران</h2>
      <p>بسیاری از ناشران از استقبال گسترده‌ی امسال ابراز رضایت کردند...</p>
    </section>
  </article>
</main>

تو این مثال، کل خبر یه article مستقله (چون می‌تونه جدا از سایت اصلی هم، مثلاً تو یه فید خبری، منتشر بشه و کامل معنا داشته باشه)، و داخلش به دو section موضوعی («جزئیات برگزاری» و «واکنش ناشران») تقسیم شده.

چند اشتباه رایج

• استفاده از section صرفاً برای گروه‌بندی ظاهری، بدون یه هدف موضوعی مستقل و بدون heading.
• استفاده از article برای محتوایی که خارج از بافت صفحه، هیچ معنای مستقلی نداره (مثلاً یه گروه از دکمه‌ها).
• فراموش‌کردن heading داخل section یا article.
• گیج‌شدن بین section و article و استفاده‌ی تصادفی از یکی به‌جای دیگری.

بهترین روش‌ها

• از این سؤال استفاده کن: «آیا این محتوا به‌تنهایی هم معنا داره؟» اگه بله، article؛ اگه فقط تو بافت اطرافش معنا داره، section.
• همیشه یه heading مناسب داخل هر section یا article بذار.
• اگه یه بخش صرفاً یه گروه‌بندی ظاهری بدون هدف موضوعی مستقله، از div استفاده کن، نه section.

نکته‌ی سئو

استفاده‌ی درست از article به گوگل کمک می‌کند محتوای مستقل و قابل‌ایندکس (مثل یک پست وبلاگ یا خبر) را به‌طور دقیق تشخیص دهد؛ section هم به فهم بهتر ساختار موضوعی داخل یک صفحه‌ی طولانی کمک می‌کند.

نکته‌ی دسترسی‌پذیری

section و article وقتی با heading همراه باشند، به کاربران صفحه‌خوان اجازه می‌دهند بین بخش‌های موضوعی مختلف یک صفحه یا مقاله، سریع‌تر جابه‌جا شوند؛ بدون heading مناسب، این تگ‌ها عملاً فایده‌ی چندانی برای پیمایش کاربر صفحه‌خوان ندارند.

جمع‌بندی

تگ article برای محتوای کاملاً مستقل و خودکفا (مثل یک پست وبلاگ) استفاده می‌شود که می‌تواند جدا از بافت اطرافش هم معنا داشته باشد، در حالی‌که section برای یک بخش موضوعی که فقط در بافت محتوای اطرافش معنا دارد به کار می‌رود. هر دو معمولاً باید یک heading مستقل داشته باشند و می‌توانند در ترکیب با یکدیگر (section داخل article یا برعکس) استفاده شوند.