شرح div و class و id للمبتدئين

عند تعلم تصميم المواقع باستخدام HTML، ستجد وسوماً (Tags) كثيرة. من أهم هذه الوسوم وسم <div> الذي يُعتبر أساسياً في بناء أي صفحة ويب. كلمة div اختصار لكلمة division أي "قسم"، ووظيفته هي تجميع العناصر داخل صندوق واحد. هذا الصندوق لا يظهر بشكل خاص في الصفحة لوحده، لكنه يجعل الكود منظم وسهل التحكم فيه.

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

ما هو class؟

الكلاس هو اسم عام تعطيه للـ <div> (أو أي عنصر آخر) حتى تقدر تتحكم فيه باستخدام CSS.
الميزة أن الكلاس يمكن تكراره أكثر من مرة في نفس الصفحة. مثلاً لو عندك 3 صناديق متشابهة بالشكل، تعطيهم نفس الكلاس وتطبق نفس التنسيق عليهم.

مثال:

<div class="box">المحتوى الأول</div>
<div class="box">المحتوى الثاني</div>

.box {
  border: 1px solid #aaa;
  background: #f9f9f9;
  padding: 10px;
}

هنا الاثنين صار لهم نفس الشكل لأنهم يستخدمون نفس الكلاس.

ما هو id؟

الـ id أيضاً اسم تعطيه للعنصر، لكن الفرق أنه خاص وفريد.
يعني في الصفحة الواحدة لا يجب أن يتكرر نفس الـ id إلا مرة واحدة.
نستخدمه عادة لتحديد عنصر معين بشكل مميز، مثل رأس الصفحة أو جزء معين نريد التحكم فيه وحده.

مثال:

<div id="header">هذا هو رأس الموقع</div>

#header {
  background: lightblue;
  text-align: center;
  padding: 20px;
}

• <div> = صندوق لتجميع وتنظيم العناصر.
• class = اسم عام يمكن تكراره لعناصر متعددة لتطبيق نفس التنسيق.
• id = اسم فريد نستخدمه لعنصر واحد فقط في الصفحة.

باستخدام هذه الأدوات الثلاثة تستطيع بناء صفحات مرتبة، واضحة، وسهلة التحكم سواء في التصميم أو في الوظائف لاحقاً مع JavaScript.