العنصر <div>

من موسوعة حسوب
مراجعة 04:58، 18 فبراير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة قسمين ومثال)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

العنصر <div> هو حاوية عامة للمحتوى التي لا تُمثِّل شيئًا معيّنًا، يمكن استخدامها لتجميع العناصر لأغراض مثل التنسيق (باستخدام خاصيتَي class أو id)، أو إنشاء قسم جديد في المستند بلغةٍ أخرى (باستخدام الخاصية lang)، وهلم جرًا.

مثال نموذجي عن استخدام العنصر <div>:

<div>
  <p>يمكنك وضع أي نوع من أنواع المحتوى هنا، بما في ذلك الجداول وخلافه.</p>
</div>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح عنصر تنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي، إضافةً إلى العنصر <dl>.
واجهة DOM HTMLDivElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصية align قديمة ومهملة وغير مدعومة في HTML5، فلا تستعملها.

ملاحظات الاستخدام

لا يجب أن يستعمل العنصر <div> إلا إذا لم يكن أيّ عنصر تنظيمي مثل <article> أو <nav> مناسبًا.

أمثلة

مثال عن استخدام العنصر <div> لتنسيق جزء من المستند يحتوي على فقرة (<p>) وجدول (<table>):

<div id="styled-div">
  <p>هذا بعض المحتوى الموجود داخل العنصر &lt;div&gt;</p>
  <table>
    <tr>
      <th>العمود الأول</th>
      <th>العمود الثاني</th>
    </tr>
    <tr>
      <td>الخلية الأولى</td>
      <td>الخلية الثانية</td>
    </tr>
  </table>
</div>

شيفرة CSS المستخدمة لتنسيق العنصر:

#styled-div {
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  padding: 0.5em 1em;
}

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <div> مع ضبط الخاصية display إلى block:

div {
  display: block;
}

مصادر ومواصفات