HTML IDs و Classes: فهم الفروقات والاستخدام الفعّال

السمة id (The id attribute)

في لغة HTML، يُستخدم السمة “id” لإعطاء عنصر معين في الصفحة مُعرّف فريد. يمكن استخدام هذا المُعرّف لتحديد العنصر وتطبيق أنماط CSS عليه أو التفاعل معه باستخدام JavaScript.

مثال:

<p id="paragraph1">هذا هو الفقرة الأولى في صفحتي.</p>

في هذا المثال، لقد أعطينا العنصر “p” القيمة “paragraph1” كمُعرّف. يمكننا الآن استخدام هذا المُعرّف لتحديد هذا العنصر وتطبيق التنسيقات عليه.

بناء جملة المحدد id (Id selector syntax)

عند استخدام CSS لتطبيق الأنماط على عناصر HTML، يُمكنك استخدام الرمز “#” متبوعًا بقيمة “id” لتحديد العنصر.

مثال:

#paragraph1 {
    color: blue;
}

في هذا المثال، نحن نستخدم بناء الجملة “#paragraph1” لتحديد العنصر الذي له “id” بالقيمة “paragraph1″، ونطبق اللون الأزرق على النص.

يجب أن تكون قيم id فريدة (Id values must be unique)

أحد القواعد الأساسية لاستخدام السمة “id” في HTML هو أن كل قيمة “id” يجب أن تكون فريدة داخل الصفحة. هذا يعني أنه لا يمكن تكرار القيمة نفسها في سمة “id” لأكثر من عنصر.

مثال:

<p id="paragraph1">هذه الفقرة الأولى.</p>
<div id="paragraph1">هذا تقسيم غير صالح.</div>

في هذا المثال، القيمة “paragraph1” تُستخدم أكثر من مرة، مما يعتبر خطأً في الصفحة.

Ids حساسة لحالة الأحرف (Ids are case sensitive)

القيمة التي تُستخدم في سمة “id” حساسة لحالة الأحرف، وهذا يعني أن “Id1″ و”ID1″ و”id1” سيُعتبرون قيمًا مختلفة. لذا، يُفضل دائمًا استخدام حالة الأحرف بشكل ثابت عند تعيين القيم لسمة “id”.

مثال:

<p id="Id1">هذه الفقرة الأولى.</p>
<p id="ID1">هذه الفقرة الثانية.</p>
<p id="id1">هذه الفقرة الثالثة.</p>

في هذا المثال، الثلاثة “id” هم مُعرّفات فريدة بسبب حساسية حالة الأحرف.

إضافة إشارات مرجعية باستخدام السمة id (Adding bookmarks with the id attribute)

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

مثال:

<a href="#section2">انتقل إلى القسم 2</a>
...
<div id="section2">هذا هو القسم 2.</div>

في هذا المثال، عند النقر على الرابط “انتقل إلى القسم 2″، سيتم التنقل مباشرة إلى الجزء من الصفحة حيث يوجد العنصر الذي يحمل القيمة “section2” في السمة “id”.

السمة class (The class attribute)

تُستخدم السمة “class” في HTML لتحديد مجموعة من العناصر التي تشترك في نفس الأنماط CSS أو تحتاج إلى التفاعل معها باستخدام JavaScript. بخلاف السمة “id”، يمكن تكرار قيمة السمة “class” في أكثر من عنصر في الصفحة.

مثال:

<p class="highlight">هذه الفقرة مُبرزة.</p>
<div class="highlight">هذا التقسيم مُبرز أيضًا.</div>

في هذا المثال، تم تطبيق القيمة “highlight” كفئة على العنصرين “p” و”div”. يمكننا الآن استخدام هذه الفئة لتطبيق التنسيقات على هذين العنصرين.

بناء جملة محدد الفئة (Class selector syntax)

عند استخدام CSS لتطبيق الأنماط على عناصر HTML، يُمكنك استخدام الرمز “.” متبوعًا بقيمة “class” لتحديد العنصر.

مثال:

.highlight {
    background-color: yellow;
}

في هذا المثال، نحن نستخدم بناء الجملة “.highlight” لتحديد العناصر التي لها “class” بالقيمة “highlight”، ونطبق لون الخلفية الأصفر عليها.

استخدام الفئات (Using classes)

الفئات مفيدة خاصة عندما ترغب في تطبيق نفس الأنماط على مجموعة من العناصر. وبخلاف السمة “id”، يمكنك استخدام السمة “class” على أكثر من عنصر في نفس الصفحة.

مثال:

<p class="highlight">هذه الفقرة مُبرزة.</p>
<div class="highlight">هذا التقسيم مُبرز أيضًا.</div>

في هذا المثال، نستخدم الفئة “highlight” على العنصرين “p” و”div”. عند تطبيق الأنماط على هذه الفئة، سيتأثر كلا العنصرين.

الفئات حساسة لحالة الأحرف (Classes are case sensitive)

مثل السمة “id”، السمة “class” أيضا حساسة لحالة الأحرف. يعتبر “Class1″ و”class1″ و”CLASS1” فئات مختلفة. لذا، يُفضل دائمًا استخدام حالة الأحرف بشكل ثابت عند تعيين القيم لسمة “class”.

مثال:

<p class="Class1">هذه الفقرة الأولى.</p>
<div class="class1">هذا التقسيم الثاني.</div>
<span class="CLASS1">هذا الجزء الثالث.</span>

في هذا المثال، الثلاثة “class” هم فئات مختلفة بسبب حساسية حالة الأحرف.

يمكن أن يكون للعنصر فئات متعددة (One element can have multiple classes)

العنصر الواحد في HTML يمكن أن يحتوي على أكثر من فئة. يمكن فصل الفئات بواسطة فراغ.

مثال:

<p class="text bold">هذه الفقرة لديها فئتين: 'text' و 'bold'.</p>

في هذا المثال، العنصر “p” لديه فئتين. يمكن استخدام كل من هذه الفئات لتطبيق أنماط مختلفة في CSS.

يمكن أن ينتمي عناصر مختلفة إلى نفس الفئة (Different elements can belong to the same class)

يمكن أن ينتمي عناصر مختلفة من HTML إلى نفس الفئة. يمكن تطبيق الأنماط المشتركة على كل العناصر التي تنتمي إلى الفئة نفسها.

مثال:

<p class="highlight">هذه الفقرة مُبرزة.</p>
<div class="highlight">هذا التقسيم مُبرز أيضًا.</div>

في هذا المثال، كلا العنصرين “p” و “div” ينتميان إلى الفئة “highlight”. تطبيق الأنماط على هذه الفئة سيؤثر على كلا العنصرين.

استخدم # للوصول إلى محددي الهوية (Use # to access id selectors)

في CSS، يمكنك استخدام الرمز “#” متبوعًا بقيمة الهوية لتحديد العنصر.

مثال:

#section2 {
    background-color: yellow;
}

في هذا المثال، نستخدم “#section2” لتحديد العنصر الذي له الهوية “section2″، ونطبق لون الخلفية الأصفر عليه.

احترس من حالة الأحرف (Mind the letter case)

كما ذكرنا سابقًا، تعتبر السمات “id” و “class” في HTML حساسة لحالة الأحرف. هذا يعني أن “ID1” و “id1” سيعتبران كائنين مختلفين. بنفس الطريقة، “CLASS1” و “class1” سيعتبران فئتين مختلفتين. هذا الأمر يجب أن يُعتبر أيضًا عند استخدام محددي الهوية والفئات في CSS.

مثال:

#ID1 {
    color: red;
}
.class1 {
    color: blue;
}

في هذا المثال، العناصر التي تحمل الهوية “ID1” ستكون باللون الأحمر، والعناصر التي تحمل الفئة “class1” ستكون باللون الأزرق.

استخدم . للوصول إلى محددي الفئة (Use . to access class selectors)

في CSS، يمكنك استخدام الرمز “.” متبوعًا بقيمة الفئة لتحديد العنصر.

مثال:

.highlight {
    color: green;
}

في هذا المثال، نستخدم “.highlight” لتحديد العناصر التي لها الفئة “highlight”، ونطبق اللون الأخضر عليها.

قم بفصل الفئات بمساحة فارغة (Separate classes with a blank space)

عند إضافة فئات متعددة إلى العنصر الواحد في HTML، يمكنك فصل الفئات بواسطة مساحة.

مثال:

<p class="text bold">هذه الفقرة لديها فئتين: 'text' و 'bold'.</p>

في هذا المثال، العنصر “p” لديه فئتين: ‘text’ و ‘bold’. ستطبق الأنماط المرتبطة بكل فئة على هذا العنصر.

الخلاصة

تقدم HTML العديد من الطرق لتحديد العناصر، والسمتين “id” و “class” هما من الأدوات الأكثر فعالية لهذا الغرض. بينما يمكن استخدام “id” لتحديد عنصر فريد في الصفحة، يمكن استخدام “class” لتحديد مجموعة من العناصر التي تشترك في نفس الأنماط. احرص على اختيار الأسماء بعناية، وتذكر أن القيم حساسة لحالة الأحرف.

الأسئلة المتداولة