في تطوير صفحات الويب باستخدام HTML، نستخدم السمات Id و Class لتحديد العناصر داخل الصفحة. على الرغم من أن كلاهما يُستخدم لتحديد العناصر، إلا أن لكل منهما استخداماته الخاصة. دعونا نستعرض الفروق بينهما وكيفية استخدامهما بطريقة صحيحة.
ما هو Id في HTML؟
سمة id تُستخدم لتعريف عنصر HTML واحد بشكل فريد. بمعنى آخر، يجب أن يكون لكل عنصر id مختلف عن أي عنصر آخر في نفس الصفحة. يُستخدم id عادةً لاستهداف عنصر معين باستخدام CSS أو JavaScript.
مثال على استخدام Id:
<div id="header">
<h1>هذا هو العنوان الرئيسي</h1>
</div>
ما هو Class في HTML؟
على عكس id، تُستخدم سمة class لتحديد مجموعة من العناصر التي تشترك في نفس النمط أو الخصائص. يمكن تعيين نفس class للعديد من العناصر، مما يسمح بتطبيق نفس التنسيقات عليها باستخدام CSS.
مثال على استخدام Class:
<div class="content">
<p>هذا هو النص الأول</p>
</div>
<div class="content">
<p>هذا هو النص الثاني</p>
</div>
الفروق الأساسية بين Id و Class
| الخاصية | Id | Class |
|---|---|---|
| التميز | يجب أن يكون فريدًا لكل عنصر. | يمكن استخدامه مع عدة عناصر. |
| الاستخدام مع CSS | يُستهدف باستخدام #id. |
يُستهدف باستخدام .class. |
| الاستخدام مع JavaScript | يُستخدم عادة لاستهداف عنصر واحد باستخدام getElementById. |
يمكن استهداف مجموعة من العناصر باستخدام getElementsByClassName. |
متى تستخدم Id ومتى تستخدم Class؟
- Id: يُستخدم عندما تحتاج إلى تحديد عنصر واحد فقط في الصفحة.
- Class: يُستخدم عندما تريد تطبيق نفس التنسيق أو السلوك على عدة عناصر.
ملاحظات هامة
- لا يجب استخدام نفس
idلأكثر من عنصر في الصفحة. - يمكن تعيين عدة
classلعنصر واحد، على سبيل المثال:<div class="content box"></div>. - يجب أن يكون
idفريدًا حتى يتمكن CSS و JavaScript من تحديد العنصر بشكل دقيق.
أمثلة إضافية
مثال على استخدام Id مع CSS:
<style>
#header {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div id="header">
<h1>مرحبًا بك في موقعي</h1>
</div>
مثال على استخدام Class مع CSS:
<style>
.content {
font-size: 18px;
color: #333;
}
</style>
<div class="content">
<p>هذا هو النص الأول.</p>
</div>
<div class="content">
<p>هذا هو النص الثاني.</p>
</div>
في هذا الدرس، تعلمنا الفرق بين id و class في HTML، وكيفية استخدام كل منهما بشكل صحيح في تطوير صفحات الويب. تذكر أن استخدام id يكون في الحالات التي تتطلب تعريف عنصر بشكل فريد، بينما يُفضل استخدام class لتطبيق أنماط أو سلوكيات على مجموعة من العناصر.
