علامة <div> HTML

  • الصفحة السابقة <dir>
  • الصفحة التالية <dl>

تعريف الاستخدام

<div> تعريف العلامات للجزء أو الجزء (القسم أو الفصل، division/section) في مستند HTML.

<div> العلامات يمكن استخدامها لفصل المستند إلى أجزاء مستقلة ومختلفة. يمكن استخدامها كأداة تنظيم صارمة دون استخدام أي تنسيق مرتبط بها.

يمكن وضع أي نوع من المحتويات في <div> داخل العلامة!<div> كمستودع للعناصر HTML، ثم استخدام CSS لتحديد النمط أو استخدام JavaScript للتعامل معها.

يمكن استخدام علامة id أو class للعلامة <div>إذا كان class أو id يمكن بسهولة تحديد <div> العلامة لتحديد النمط.

ملاحظة:بشكل افتراضي، يضيف المتصفح دائمًا <div> وضع مسافة بين العنصر.

الاستخدام

<div> هو عنصر حجمي. هذا يعني أن محتواه يبدأ تلقائيًا في سطر جديد. في الواقع، النسخة هي <div> الطريقة المدمجة الفريدة. يمكن من خلال <div> لها class أو id النمط الإضافي.

لا تحتاج إلى تطبيق <div> التي يمكنها إضافة

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

يرجى الرجوع أيضًا إلى:

دليل HTMLعناصر النص المسطحة و العناصر الداخلية في HTML

دليل HTMLتخطيط HTML

دليل HTML DOMمفهوم Div

مثال

جزء من المستند الذي يستخدم CSS لتحديد النمط في عناصر div:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>هذا هو العنوان في عناصر div</h2>
  <p>هذا نص في عناصر div.</p>
</div>
</body>
</html>

جربها بنفسك

تحليل الحالة

<body>
 <h1>موقع جديد</h1>
  <p>نص. نص. نص...</p>
  ...
 <div class="news">
  <h2>عنوان الأخبار 1</h2>
  <p>نص. نص. نص...</p>
  ...
</div>
 <div class="news">
  <h2>عنوان الأخبار 2</h2>
  <p>نص. نص. نص...</p>
  ...
 </div>
 ...
</body>

شرح المثال

كما ترونه، هذا جزء من HTML يحاكي بنية موقع الأخبار. كل div تجمع عنوان الخبر والمقدمة معًا، مما يعني أن div يضيف هيكل إضافي إلى المستند. وبما أن هذه div تتبع نفس الفئة من العناصر، يمكن استخدام class="news" لتحديد هذه div، مما يضيف معاني مناسبة للـ div ويجعل من السهل استخدام الأسلوب لتحديد النمط لهذه الـ div، مما يجعل ذلك مفيدًا ب方方面面.

نصيحة:للتعلم بشكل أعمق حول استخدام class و id، يرجى قراءة فصل 'الترميز الم estructural' في W3school، وهو جزء 'div، id وأدوات أخرى'.

خصائص العالمية

<div> يدعم العلامة أيضًا خصائص العالمية في HTML.

خصائص الحدث

<div> يدعم العلامة أيضًا خصائص الحدث في HTML.

إعدادات CSS افتراضية

معظم المتصفحات تستخدم القيم التالية كقيم افتراضية لعرضها <div> النوع:

div {
  عرض: block;
}

جربها بنفسك

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
دعم دعم دعم دعم دعم
  • الصفحة السابقة <dir>
  • الصفحة التالية <dl>