الهوية والتصنيف (Class & ID)

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

في لغة HTML، الصناديق هي العناصر (Tags)، والملصقات هي الخصائص id و class. هذان هما أهم صفتين ستستخدمهما طوال حياتك البرمجية. في هذا الدرس، سنشرح ببطء شديد وتفصيل ممل ما هما، وكيف نستخدمهما، وما الفرق الجوهري بينهما، دون الدخول في تفاصيل التلوين والتصميم (CSS) التي سنتعلمها في الكورس القادم.

مفهوم التمييز بين العناصر

حتى الآن، عندما نكتب وسم <p>، فإن المتصفح يفهم أن هذه "فقرة نصية". ولكن ماذا لو كان لديك في الصفحة 100 فقرة، وتريد أن تميز فقرة واحدة فقط لتكون "تحذيراً"؟ أو تريد تمييز مجموعة من الفقرات ليكونوا "أخباراً عاجلة"؟

المتصفح لا يفرق بين <p> وأخرى إلا إذا أعطيتهم أسماء. في عالم البرمجة، نحن نستخدم نظامين للتسمية:

النظام الفردي (ID): مثل "الرقم القومي" أو "رقم جواز السفر". هو شيء يملكه شخص واحد فقط ولا يتكرر أبداً.
النظام الجماعي (Class): مثل "الزي المدرسي" أو "اسم العائلة" أو "المهنة". هو شيء يمكن أن يشترك فيه مجموعة كبيرة من الناس.

تنبيه هام جداً: نحن الآن نتعلم فقط كيفية "إعطاء الأسماء" للعناصر (HTML). أما كيفية "استخدام هذه الأسماء" لتغيير الألوان والأحجام والأشكال، فهذا هو دور لغة CSS التي سندرسها في الكورس القادم. لذا لا تقلق إذا لم يتغير شكل العنصر الآن، نحن فقط نجهز الأساس.

خاصية المعرف الفريد (ID Attribute)

كلمة id هي اختصار لـ "Identity" أو "Identifier" وتعني "المعرف". عندما تعطي عنصراً خاصية id، فأنت تخبر المتصفح أن هذا العنصر فريد من نوعه في هذه الصفحة.

قواعد الـ ID الصارمة

التفرد (Uniqueness): لا يجوز أبداً أن يحمل عنصران في نفس الصفحة نفس الـ id. إذا سميت عنصراً id="header"، فلا يمكن لأي عنصر آخر أن يأخذ هذا الاسم.
عنصر واحد، معرف واحد: العنصر الواحد لا يمكن أن يملك أكثر من id.
الاستخدام: يستخدم لتمييز العناصر الرئيسية جداً (مثل: رأس الصفحة، تذييل الصفحة، القائمة الرئيسية، شعار الموقع).

مثال (1): تمييز عناصر الصفحة الرئيسية

تخيل أننا نبني هيكل صفحة. لدينا قسم واحد فقط للمقدمة، وقسم واحد فقط للخاتمة. هنا نستخدم ID.

كود HTML باستخدام ID


مرحباً بكم في موقعي


    أنا مطور ويب مبتدئ...



    جميع الحقوق محفوظة

اختر - هل يجوز أن أعطي فقرتين مختلفتين نفس الـ id="text"؟
(أ) نعم، عادي جداً. (ب) نعم، ولكن غير مفضل. (ج) لا، هذا خطأ برمجي فادح، الـ id يجب أن لا يتكرر. (د) نعم، إذا كانوا في نفس القسم.

الإجابة: (ج) لا، هذا خطأ برمجي فادح. (الـ id مثل الرقم القومي، لا يتكرر).

الاستخدام العملي للـ ID في الروابط الداخلية

قد تسأل: "بما أننا لن نستخدم CSS الآن، ما فائدة الـ ID؟"
الفائدة العظيمة في HTML هي الروابط الداخلية (Bookmarks). هل رأيت في بداية هذا الدرس جدول المحتويات؟ عندما تضغط على رابط، ينقلك المتصفح لأسفل الصفحة إلى قسم معين. هذا السحر يحدث بفضل الـ ID.

كيفية الربط (Anchor Links)

نعطي العنصر الذي نريد الذهاب إليه id مميز (مثلاً: id="contact").
ننشئ رابطاً <a>، وفي خاصية href نضع علامة الشباك # متبوعة باسم الـ ID (مثلاً: href="#contact").

مثال (2): إنشاء قائمة تنقل داخل الصفحة

التنقل باستخدام الروابط والـ ID



    اذهب إلى الأخبار |
    اذهب إلى الرياضة |
    اذهب إلى التكنولوجيا


 قسم الأخبار السياسية
تفاصيل الأخبار هنا...






قسم الرياضة
مباراة اليوم كانت رائعة...






قسم التكنولوجيا
تعلم البرمجة ممتع جداً...

اختر - عند إنشاء رابط ينقل المستخدم إلى قسم id="section1"، ماذا نكتب في الـ href؟
(أ) href="section1" (ب) href="@section1" (ج) href="#section1" (د) href=".section1"

الإجابة: (ج) href="#section1" (علامة الشباك ضرورية للإشارة للـ ID).

خاصية الفئة أو الصنف (Class Attribute)

الآن نأتي للخاصية الأكثر استخداماً وشيوعاً: class.
الـ Class تعني "فئة" أو "مجموعة". نستخدمها عندما نريد تصنيف مجموعة من العناصر تحت مسمى واحد. تخيل أنك في مدرسة، هناك العديد من الطلاب يرتدون نفس الزي، جميعهم ينتمون لـ "class" الطلاب.

ميزات الـ Class

التكرار (Reusability): يمكنك إعطاء نفس اسم الـ class لعدد لا نهائي من العناصر في الصفحة.
التجميع: تسمح لك بمعاملة مجموعة من العناصر المختلفة (عنوان، فقرة، صورة) بنفس الطريقة مستقبلاً.
المرونة: هي الأداة الأساسية التي ستستخدمها في CSS لتلوين وتنسيق عناصر متعددة مرة واحدة.

مثال (3): تصنيف الأخبار

لنفترض أن لدينا موقعاً إخبارياً. بعض الأخبار "عاجلة" وبعضها "رياضية". سنعطي كل خبر الـ class المناسب له.

استخدام Class لتجميع العناصر



    انفجار ماسورة مياه
    يرجى توخي الحذر...



    تعطل حركة المرور
    ازدحام شديد في وسط المدينة...



    فوز الفريق المحلي
    حقق الفريق فوزاً ساحقاً...


ملاحظة: المباراة القادمة غداً.

ملاحظة للمستقبل (CSS): عندما نذهب لكورس CSS، سنقول للمتصفح: "يا متصفح، أي عنصر يملك class="urgent-news"، اجعل خلفيته حمراء". بفضل الكلاس، سنكتب أمر التلوين مرة واحدة، وسيطبق على جميع العناصر التي تحمل هذا الاسم. رأيت كم هو مفيد؟

الفرق الجوهري بين Class و ID

هذا الجدول مهم جداً ويجب فهمه وحفظه، لأنه أساس كل شيء قادم.

جدول المقارنة

وجه المقارنة	ID (المعرف)	Class (الفئة)
التكرار	فريد (Unique)، يستخدم مرة واحدة فقط في الصفحة.	متكرر، يمكن استخدامه مع ملايين العناصر.
التشبيه	الرقم القومي، بصمة الإصبع.	الزي الموحد، اسم الفريق، نوع السيارة.
الرمز في الروابط	يستخدم الرمز `#` (الشباك).	لا يستخدم للروابط الداخلية بشكل مباشر.
الرمز في CSS (مستقبلاً)	يرمز له بـ `#`.	يرمز له بـ `.` (النقطة).
الاستخدام الأمثل	للعناصر الرئيسية الهيكلية (Header, Footer, Sidebar).	للعناصر المتكررة (Cards, Buttons, Text styles).

اختر - ما هو العنصر الذي يشبه "الرقم القومي" للشخص؟
(أ) Class. (ب) Tag. (ج) ID. (د) Attribute.

الإجابة: (ج) ID.

تعدد الكلاسات (Multiple Classes)

هذه ميزة رائعة وخاصة بالـ class فقط ولا توجد في الـ id.
هل يمكن للشخص أن يكون "طالباً" وفي نفس الوقت "لاعب كرة قدم" وفي نفس الوقت "مصري"؟ نعم!
بنفس الطريقة، العنصر في HTML يمكن أن يأخذ أكثر من كلاس في نفس الوقت.

كيفية كتابة كلاسات متعددة

نكتب جميع الأسماء داخل علامتي التنصيص الخاصة بخاصية class.
نفصل بين كل اسم وآخر بـ مسافة (Space).
المتصفح سيعامل العنصر على أنه ينتمي لكل هذه المجموعات في وقت واحد.

مثال (4): أزرار بخصائص متعددة

لنفترض أننا نصمم أزراراً. لدينا كلاس اسمه btn يعطي الشكل الأساسي للزر، وكلاس اسمه red يعطي اللون الأحمر، وكلاس large يجعل الحجم كبيراً.

عناصر تحمل أكثر من كلاس

اختر - أي الكود التالي صحيح لإعطاء العنصر كلاسين هما "big" و "box"؟
(أ) class="big-box" (ب) class="big, box" (ج) class="big & box" (د) class="big box"

الإجابة: (د) class="big box" (الفصل يكون بالمسافة فقط).

قواعد التسمية الصحيحة

عندما تختار أسماء للـ id أو class، هناك قواعد يجب اتباعها لكي لا تحدث أخطاء، وهناك "آداب" يفضل اتباعها.

الممنوعات (قواعد صارمة)

لا مسافات: لا تسمي الكلاس big box (بمسافة)، لأن المتصفح سيفهمها على أنها كلاسين منفصلين. استخدم الشرطة big-box أو الشرطة السفلية big_box.
لا تبدأ برقم: لا تكتب class="1box". الاسم يجب أن يبدأ بحرف إنجليزي.
حساسية الأحرف: الاسم MyName يختلف عن myname. يفضل دائماً استخدام الحروف الصغيرة (lowercase).

النصائح الذهبية (Best Practices)

استخدم أسماء ذات معنى: لا تسمي الكلاس x أو y أو box1. سمِّه main-menu أو error-message لكي تفهم الكود عندما تعود إليه بعد شهر.
استخدم الشرطة (Hyphen): المبرمجون المحترفون يفضلون فصل الكلمات بالشرطة العادية، مثل user-profile-card. هذه الطريقة تسمى "Kebab Case".

شرح التصنيفات (class, id) | في HTML