تفاوت div با عناصر Semantic در HTML

<div> یک عنصر عمومی و خنثی است که هیچ معنای ذاتی‌ای ندارد. کار آن فقط گروه‌بندی محتوا برای اهداف چیدمان یا استایل‌دهی است. مرورگر، صفحه‌خوان یا موتور جست‌وجو از یک <div> هیچ اطلاعاتی درباره نقش آن بخش از صفحه دریافت نمی‌کند.

وقتی هیچ‌کدام از عناصر معنادار موجود، توصیف درستی از نقش آن بخش نیستند و شما فقط به یک ظرف برای چیدمان یا استایل نیاز دارید. برای مثال:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
</div>

اینجا هدف فقط ساختن یک چیدمان گرید است؛ هیچ معنای محتوایی خاصی در کار نیست، پس <div> انتخاب کاملاً درستی است.

وقتی آن بخش از صفحه یک نقش مشخص و قابل‌نام‌گذاری دارد. اگر بتوانید نقش یک بخش را با یک کلمه مثل «منو»، «محتوای اصلی» یا «فوتر» توصیف کنید، احتمالاً یک عنصر معنادار برایش وجود دارد.

نسخه‌ای که فقط از div استفاده می‌کند:

<div class="site-footer">
  <div class="footer-links">
    <div><a href="/#contact">تماس</a></div>
  </div>
</div>

و نسخه معادل با عناصر معنادار در جایی که واقعاً معنا دارند:

<footer class="site-footer">
  <div class="footer-links">
    <a href="/#contact">تماس</a>
  </div>
</footer>

توجه کنید که footer-links همچنان یک <div> ماند — چون فقط یک ظرف چیدمانی برای چند لینک است و نقش معنایی مستقلی ندارد. فقط بیرونی‌ترین ظرف، که واقعاً نقش «فوتر صفحه» را دارد، به <footer> تبدیل شد.

وقتی یک بخش واقعاً نقش معنایی دارد (مثل فوتر، ناوبری اصلی یا محتوای اصلی) اما با div پیاده‌سازی شود، کاربر صفحه‌خوان آن نقش را در نقشه پیمایشی صفحه نمی‌بیند. این یعنی از دست دادن یک قابلیت دسترس‌پذیری رایگان که HTML به‌صورت پیش‌فرض ارائه می‌دهد، بدون نیاز به هیچ کد اضافه.

کدی که صرفاً از <div>های تودرتو با کلاس‌های عمومی ساخته شده، برای توسعه‌دهنده بعدی (یا خود شما، شش ماه بعد) خواندنش سخت‌تر است؛ باید نام کلاس‌ها را بخواند تا بفهمد هر بخش چیست. وقتی <header>، <main> و <footer> را می‌بینید، ساختار کلی صفحه را در چند ثانیه و بدون خواندن یک خط CSS می‌فهمید.

اصطلاح غیررسمی «Divitis» به وضعیتی گفته می‌شود که یک صفحه پر از <div>های تودرتوی غیرضروری است، حتی در جاهایی که یک عنصر معنادار مناسب وجود دارد یا اصلاً نیازی به یک ظرف اضافه نیست. نشانه رایج آن، لایه‌های زیاد <div> است که هرکدام فقط یک کلاس CSS دارند و هیچ‌کدام نقش مستقلی در ساختار صفحه ایفا نمی‌کنند.

Semantic HTML به این معنا نیست که هرگز از <div> استفاده نکنید. <div> ابزاری کاملاً معتبر و ضروری برای چیدمان است. نکته این است که از آن به‌عنوان پیش‌فرض همیشگی استفاده نکنید؛ پیش از هر <div> از خودتان بپرسید: «آیا این بخش نقش معنایی مشخصی دارد که یک عنصر HTML برایش وجود دارد؟» اگر جواب مثبت بود، از آن عنصر استفاده کنید؛ اگر نه، <div> انتخاب درستی است.