بخش بندی صفحه با کمک المان <div> در HTML

از المان <div> برای ایجاد یک بخش یا قسمت در سند HTML استفاده می‌شود. این المان به عنوان یک المان دربرگیرنده عمومی شناخته می‌شود و می‌تواند انواع المان های دیگر اچ‌تی‌ام‌ال را دربربگیرد. حروف div در نام این المان HTML از ابتدای واژه Division (به معنای بخش یا قسمت) گرفته شده است.

المان های <div> به خودیِ خود معنا و مفهوم خاصی ندارند و نمایانگر محتوای ویژه‌ای نیستند. اما می‌توانند محتواها و المان‌های مرتبط با یکدیگر را گروه‌بندی کنند. به این ترتیب امکان تعیین استایل بخشی از صفحه و مجموعه‌ای از المان ها با کمک CSS فراهم می‌شود. به علاوه با کمک جاوااسکریپت، دسترسی به این المان ها و تغییر آن‌ها امکان‌پذیر می‌شود. (برای تعیین استایل یا دسترسی به المان های <div> معمولا از آی‌دی یا کلاس اختصاص داده شده به آن‌ها استفاده می‌شود).

نحوه درج المان <div> همراه با مثال

برای ایجاد یک المان <div> و قرار دادن المان ها و محتواهای مختلف داخل آن کافیست المان های موردنظر را مشابه با مثال زیر بین تگ شروع <div> و تگ پایان </div> قرار دهید:

<div>
   <p>This is a paragraph inside a div element.</p>
   <p>This is another paragraph.</p>
</div>

در ادامه به المان <div> در مثال بالا یک کلاس alertbox اضافه می‌کنیم:

<div class="alertbox">
   <p>This is a paragraph inside a div element.</p>
   <p>This is another paragraph.</p>
</div>

حالا قانون CSS زیر را برای اعمال ظاهر مناسب با رنگ زمینه قرمز به این المان در نظر بگیرید:

.alertbox{
  padding: 15px;
  background-color: #f44336;
  color: white;
  text-align: center; 
}

در تصویر زیر نمایی از اعمال این استایل روی المان <div> فوق (شامل دو پاراگراف) را مشاهده می‌کنید:

بازگشت به فهرست مجموعه آموزشی HTML