مقدمه

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

نقش عنصر div در HTML

عنصر div یک عنصر گروه‌بندی HTML است و حکم یک کانتینر جنریک را دارد. تفاوت این عنصر با سایر عناصر گروه‌بندی در جنریک بودن آن است. یعنی تنها زمانی از این عنصر برای گروه‌بندی محتوا استفاده می‌کنیم که هیچ عنصر گروه‌بندی دیگری برای هدف ما مناسب نباشد.

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

Copy Icon HTML
<article lang="en-US">
  <h1>My use of language and my cats</h1>
  <p>
    My cat's behavior hasn't changed much since her absence, except
    that she plays her new physique to the neighbors regularly, in an
    attempt to get pets.
  </p>
  <div lang="en-GB">
    <p>
      My other cat, coloured black and white, is a sweetie. He followed
      us to the pool today, walking down the pavement with us. Yesterday
      he apparently visited our neighbours. I wonder if he recognises that
      their flat is a mirror image of ours.
    </p>
    <p>
      Hm, I just noticed that in the last paragraph I used British
      English. But I'm supposed to write in American English. So I
      shouldn't say "pavement" or "flat" or "colour"...
    </p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

به طور کلی، در اغلب موارد برای گروه‌بندی محتوایی، یک عنصر معنایی مناسب‌تر از div وجود دارد و لذا کاربرد عنصر div به مواردی شبیه مثال بالا و یا مواردی که عناصر را با هدف استایل‌دهی (با استفاده از CSS) گروه‌بندی می‌کنیم، منحصر می‌شود.