شرح class و id في HTML بالعربي — الفرق بين الفئات والمعرفات

السابق التالي

تعلمت حتى الآن كيف تبني صفحات HTML كاملة — العناوين، الفقرات، الجداول، النماذج، والهيكل العام. لكن يبقى سؤال مهم: كيف أُميّز عنصراً بعينه لأُنسّقه بـ CSS أو أتحكم به بـ JavaScript؟ الجواب هو السمتان class و id — وهذا الدرس يشرح كل شيء عنهما.

تشبيه من الحياة

تخيّل أنك في مدرسة كبيرة فيها مئات الطلاب. عندما يريد الأستاذ مناداة شخص محدد، لديه خياران:

يناديه باسمه الكامل الفريد — لا يوجد في الفصل كله إلا طالب واحد اسمه "أحمد بن علي". هذا هو مفهوم id.
يناديه بتصنيفه — "طلاب المجموعة الأولى، اقفوا!" أو "كل من يرتدي قميصاً أزرق، تعالوا". هذا هو مفهوم class.

في HTML نفعل الشيء نفسه تماماً. نستخدم class لتصنيف مجموعة من العناصر، ونستخدم id لتمييز عنصر واحد فقط لا يتكرر.

سمة class — للمجموعات والتصنيفات

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

<!-- عدة عناصر تشترك في نفس الكلاس -->
<p class="note">هذه ملاحظة أولى.</p>
<p class="note">هذه ملاحظة ثانية.</p>
<span class="note">ملاحظة داخل السطر.</span>

الآن في CSS يمكنك تنسيق الثلاثة دفعة واحدة بكتابة:

/* تنسيق كل العناصر التي لها class="note" */
.note {
    background-color: #fff3cd;
    border-right: 4px solid orange;
    padding: 10px;
}

أكثر من كلاس على نفس العنصر

يمكنك إعطاء العنصر الواحد أكثر من كلاس بوضع مسافة بينهم. المتصفح يطبق تنسيقات كل الكلاسات على ذلك العنصر:

<!-- هذا الزر يملك كلاسين: "btn" و "btn-primary" -->
<button class="btn primary">إرسال</button>

<!-- هذه البطاقة تملك ثلاثة كلاسات -->
<div class="card featured large">...</div>

تنبيه: المسافة بين الكلاسات تُفصل بينهما — فلا تستخدم المسافة كجزء من اسم الكلاس. إذا أردت اسماً من كلمتين اكتب: my-note أو my_note، وليس my note.

سمة id — للعنصر الفريد الواحد

تُستخدم سمة id لتمييز عنصر واحد بعينه في الصفحة. هو بمثابة "رقم الهوية الوطنية" — فريد تماماً ولا يتكرر.

<!-- معرّف فريد للعنوان الرئيسي -->
<h1 id="main-title">مرحباً بكم في DevArabi</h1>

<!-- معرّف فريد لنموذج الاتصال -->
<form id="contact-form">...</form>

<!-- معرّف فريد للتذييل -->
<footer id="page-footer">...</footer>

قاعدة صارمة: لا يجوز تكرار نفس الـ id في الصفحة الواحدة. إذا أردت تمييز عدة عناصر متشابهة، استخدم class وليس id.

الفرق الجوهري بين class و id

الميزة	الفئة (class)	المعرف (id)
التكرار	يمكن استخدامه في عدة عناصر	يُستخدم مرة واحدة فقط في الصفحة
تعدد القيم	العنصر يمكنه حمل عدة كلاسات: `class="a b c"`	العنصر يحمل معرّفاً واحداً فقط
الاستخدام الأساسي	تنسيق مجموعات بـ CSS	تمييز عنصر وحيد أو الوصول إليه بـ JavaScript
رمز الاستهداف في CSS	`.note { ... }` (نقطة في البداية)	`#main-title { ... }` (هاشتاق في البداية)

استخدام الـ id للروابط الداخلية

من أجمل استخدامات id هي إنشاء "روابط داخلية" تنقل الزائر فوراً إلى جزء معين في نفس الصفحة. هذا ما يُستخدم في "جداول المحتويات" التي تراها في مقالات الويكيبيديا والمدونات.

<!-- روابط جدول المحتويات في أعلى الصفحة -->
<nav>
    <ul>
        <li><a href="#intro">المقدمة</a></li>
        <li><a href="#details">التفاصيل</a></li>
        <li><a href="#conclusion">الخلاصة</a></li>
    </ul>
</nav>

... (محتوى طويل) ...

<!-- الأقسام الهدف (لاحظ أن الـ href="#intro" يستهدف id="intro") -->
<h2 id="intro">المقدمة</h2>
<p>...</p>

<h2 id="details">التفاصيل</h2>
<p>...</p>

<h2 id="conclusion">الخلاصة</h2>
<p>...</p>

عند الضغط على رابط "التفاصيل"، ينتقل المتصفح تلقائياً إلى القسم الذي يحمل id="details". علامة # في الرابط هي التي تخبر المتصفح بأننا نريد الانتقال داخل الصفحة نفسها.

مثال عملي كامل

إليك صفحة HTML كاملة تستخدم class و id بشكل احترافي:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحة المقالات — DevArabi</title>
</head>
<body>

    <!-- id فريد للعنوان الرئيسي -->
    <h1 id="page-title">أحدث المقالات</h1>

    <!-- كل مقالة تحمل نفس الكلاس "article-card" -->
    <article class="article-card">
        <h2>ما هو HTML؟</h2>
        <p class="summary">شرح مبسط للغة ترميز الويب.</p>
        <a class="read-more" href="/articles/html">اقرأ أكثر</a>
    </article>

    <article class="article-card featured">
        <h2>دليل CSS للمبتدئين</h2>
        <p class="summary">تعلم تنسيق صفحاتك من الصفر.</p>
        <a class="read-more" href="/articles/css">اقرأ أكثر</a>
    </article>

    <!-- id فريد للتذييل -->
    <footer id="page-footer">
        <p>جميع الحقوق محفوظة &copy; 2025 DevArabi</p>
    </footer>

</body>
</html>

الآن يمكن لملف CSS أن يُنسّق كل .article-card بنفس الشكل، ويُنسّق .article-card.featured بشكل مختلف لإبراز المقالة المميزة، ويُنسّق #page-footer فريداً بتصميمه الخاص.

القاعدة الذهبية — متى تستخدم أياً منهما؟

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

الأسئلة الشائعة — FAQ

هل يمكنني استخدام أحرف عربية في أسماء class وid؟

تقنياً HTML5 يسمح بذلك، لكن الأفضل دائماً استخدام الأحرف الإنجليزية والأرقام والشرطات. الأسماء الإنجليزية تعمل بشكل مضمون مع CSS وJavaScript دون أي مشاكل.

هل يمكنني إعطاء نفس العنصر class وid معاً؟

نعم تماماً. يمكن للعنصر أن يمتلك class و id في نفس الوقت. مثلاً: <div id="hero" class="section featured"> — هذا منطقي ومقبول.

ما الذي يحدث إذا كررت نفس الـ id؟

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

هل اسم الكلاس أو المعرف حساس لحالة الأحرف؟

نعم. class="Note" و class="note" مختلفان تماماً في CSS وJavaScript. التزم بالأحرف الصغيرة دائماً تجنباً للأخطاء.

ما هو اسم الكلاس الجيد؟

اختر أسماء تصف الوظيفة أو المحتوى وليس المظهر البصري. مثلاً: class="article-card" أفضل من class="red-box"، لأن اللون قد يتغير لاحقاً بينما الوظيفة تبقى.

ممتاز! أتقنت الآن كيف تعطي عناصر HTML أسماءً احترافية بـ class و id. في الدرس القادم، سنتعلم الوسائط المتعددة (Media) — كيف تُضيف فيديو وصوت لصفحتك بلغة HTML.

السابق التالي

DevArabi

دورة تعلم HTML