فهم عنصر div في HTML

في HTML، العنصر <div> هو اختصار لكلمة "division" أي "قسم". يُستخدم <div> لتقسيم أو تجميع العناصر في الصفحة لأغراض التنسيق عبر CSS أو لإجراء تعاملات معينة باستخدام JavaScript. هو عنصر حاوية شائع الاستخدام ولا يحمل أي معنى بحد ذاته؛ يعني أنه لا يعرف نوع المحتوى الذي يحتويه.

من خصائص العنصر <div> لا يؤثر على المحتوى أو التنسيق بشكل مباشر, ويمكن استخدامه لإنشاء تخطيطات معقدة عندما يتم تطبيق CSS.
يتصرف كعنصر بلوك (block element)، ما يعني أنه يأخذ العرض الكامل للوالد (parent element) ويبدأ على سطر جديد.

من استخدامات <div>تجميع العناصر التي يجب أن تتشارك في نمط معين أو تعديلات في التخطيط. وتطبيق أنماط CSS، مثل الخلفيات، الحدود، أو التباعد. استهداف عناصر متعددة بسهولة باستخدام JavaScript من خلال إعطاء <div> معرف (ID) أو فئة (class).

مثال على استخدام <div> في HTML:

<div class="header">
  <h1>Welcome to My Website</h1>
  <p

>This is my personal webpage where I share my projects and ideas.</p>
</div>

<div class="content">
  <p>Here is some more detailed information about what I do and what this site is for. You can find links to various sections and articles below.</p>
</div>

<div class="footer">
  <p>Contact me at: example@example.com</p>
</div>

في هذا المثال، يتم استخدام عناصر <div> لتنظيم أقسام الصفحة بطريقة مرتبة وواضحة. كل <div> يحتوي على محتويات مختلفة تمثل أجزاء مختلفة من الصفحة: الرأس (header)، المحتوى الرئيسي (content)، والتذييل (footer).

العنصر <div>