article، section، aside؛ چه زمانی div بنویسیم؟

یک تفاوت کاربردی

article محتوای نسبتاً مستقل است؛ مثل یک خبر، نوشتهٔ وبلاگ یا کارت محتوایی که جدا هم قابل‌فهم باشد. section یک بخش موضوعی از محتواست. aside محتوای مرتبط اما جانبی است؛ مثل یادداشت تکمیلی. این عناصر را صرفاً به‌خاطر سمت یا شکل ظاهری انتخاب نکن.

<article>
  <header>
    <h2>چرا HTML معنایی؟</h2>
    <p>نوشتهٔ سارا</p>
  </header>
  <p>ساختار روشن به همه کمک می‌کند.</p>
  <section>
    <h3>یک مثال</h3>
    <p>لینک واقعی از متن قابل‌کلیک بهتر است.</p>
  </section>
</article>
<aside>
  <h2>مطالعهٔ بیشتر</h2>
  <p>راهنمای دسترس‌پذیری را بخوان.</p>
</aside>

div ظرف عمومی بدون معنای اختصاصی و span ظرف عمومی برای بخشی از متن است. وقتی فقط برای گروه‌بندی یا استایل ظرف لازم داری و عنصر معنایی مناسب وجود ندارد، از آن‌ها استفاده کن. نمونه: <p>کد: <span class="code">A12</span></p>.

داخل a یک لینک دیگر یا دکمه نگذار. داخل button هم کنترل تعاملی دیگری قرار نده. معنایی‌بودن یک صفحه جای بررسی قواعد تودرتویی و مسیر صفحه‌کلید را نمی‌گیرد.