في هذا الدرس 7تصفّح المواضيع
في معمارية مستندات HTML، تمثل خاصيتا الفئة
class والمعرف id الآليتين الأساسيتين لربط هيكل الصفحة بتنسيقات CSS البصرية والوظائف البرمجية التفاعلية في جافا سكريبت. ورغم أن كلتا الخاصيتين تمنحان أسماءً للعناصر، إلا أنهما تجسدان فلسفتين مختلفتين تماماً من حيث التفرد وقابلية إعادة الاستخدام.
HTML
<!-- Reusable class applied to multiple buttons -->
<button class="btn btn-primary">Save Document</button>
<button class="btn btn-primary">Publish Post</button>
<!-- Unique id applied to one exclusive container -->
<div id="site-banner">Site Banner</div>صُممت خاصية
class عمداً لإعادة الاستخدام المتكرر عبر أي عدد ترغب فيه من عناصر الصفحة لبناء مظهر موحد. وفي المقابل الصارم، يجب أن تكون قيمة خاصية id فريدة تماماً داخل المستند بأكمله؛ وتكرار نفس المعرف على أكثر من عنصر يمثل انتهاكاً جسيماً لمعايير HTML ويؤدي إلى سلوكيات عشوائية وأخطاء برمجية خفية.يحقق تطبيق التنسيقات عبر خاصية
class المبدأ البرمجي الشهير بعدم تكرار الكود البرمجي؛ فمن خلال تجميع حزمة من قواعد CSS تحت اسم فئة موحد، يمكنك إكساب مئات المكونات المتطابقة في موقعك خطوطاً وألواناً ومساحات حشو متناسقة بلمسة واحدة.
HTML
<div class="card">
<h3 class="card-title">Design Systems</h3>
<p class="card-body">Consistent UI components.</p>
</div>
<div class="card">
<h3 class="card-title">Accessibility</h3>
<p class="card-body">Inclusive user experiences.</p>
</div>في ملفات تنسيق CSS، يتم استهداف الفئات بوضع نقطة تسبق اسم الفئة مثل
.card أو .btn-primary. ويحمل محدد الفئة وزناً متوازناً في ميزان الأسبقية الحسابي بمقدار (0,1,0)، مما يتيح للمطورين تخصيص وتعديل المظهر بمرونة دون الدخول في صراعات أسبقية معقدة.لا يقتصر عنصر HTML على حمل اسم فئة واحد فقط؛ بل يمكنك فصل أسماء الفئات المتعددة بمسافات داخل نفس خاصية
class، مما يسمح بتركيب واجهات غنية ومتنوعة من خلال دمج فئات تنسيق صغيرة ومحددة المهام.
HTML
<button class="btn btn-large btn-success shadow-lg">
Confirm Order
</button>
<div class="alert alert-warning text-center rounded">
Session expires in 5 minutes.
</div>يتيح تركيب الفئات فصل الهيكل الأساسي عن التعديلات اللونية والحجمية؛ فعلى سبيل المثال، توفر فئة أساسية مثل
.btn أبعاد الحشو ونمط العرض العام، بينما تقوم فئات التعديل الإضافية مثل .btn-large أو .btn-success بضبط الحجم والألوان دون تكرار القواعد الأساسية.تمنح خاصية
id هوية فريدة وحصرية لعنصر واحد فقط في كامل مستند صفحة الويب. وخلافاً للفئات التي تقبل التكرار، فإن قيمة المعرف يجب ألا تتكرر إطلاقاً؛ وتكرار نفس المعرف يخل بصحة المستند القياسية ويجعل دوال جافا سكريبت مثل getElementById('id') تفشل في الوصول السليم.يوضح الجدول المقارن التالي أبرز الفروق الهندسية والوظيفية بين خاصية الفئة class وخاصية المعرّف الفريد id:
| وجه المقارنة | خاصية الفئة (.class) | خاصية المعرّف (#id) | الغرض الأساسي |
|---|---|---|---|
| التكرار في المستند | قابلة لإعادة الاستخدام على عدد غير محدود من العناصر | فريدة تماماً ولا يجوز تكرارها في الصفحة الواحدة | الفئة للمجموعات المشتركة والمعرّف للعنصر المفرد |
| تعدد القيم بالخاصية | تقبل عدة أسماء فئات مفصولة بمسافات | تقبل اسماً واحداً متصلاً فقط بدون أي مسافات | دمج أنماط تصميمية متعددة بمرونة عالية |
| وزن الأولوية في CSS | أولوية متوسطة متوازنة (0, 1, 0) | أولوية مرتفعة جداً (1, 0, 0) | تسهيل صيانة الأنماط عبر الاعتماد على الفئات |
| روابط القفز الداخلي | لا تعمل كهدف لروابط التجزئة #hash | تعمل كمرساة مباشرة لروابط href="#id" | بناء فهارس التنقل السريع داخل الصفحات الطويلة |
| ربط الحقول وإمكانية الوصول | لا تصلح لربط وسم التسمية بالحقل | الهدف الإلزامي لخاصية for="id" لربط الحقول | ضمان توافق النماذج مع قارئات الشاشة |
HTML
<!-- Form Label binding via unique ID -->
<label for="user-email">Email Address</label>
<input type="email" id="user-email" name="email">
<!-- JavaScript DOM Query hook -->
<div id="checkout-total">$149.00</div>إلى جانب التنسيق، يمثل المعرف
id ركيزة أساسية في معايير إتاحة الويب؛ حيث يربط بين نصوص التسمية <label> وحقول الإدخال عبر خاصية for="user-email". ويضمن هذا الربط قيام برمجيات قراءة الشاشة بنطق وظيفة الحقل بوضوح للمستخدمين من ذوي الإعاقة البصرية.من أهم القدرات الأصيلة لخاصية
id في المتصفح عملها كمرسى داخلي للانتقال الفوري داخل الصفحة؛ فمن خلال إسناد اسم المعرف مسبوقاً برمز المربع href="#section-name" داخل وسم الرابط <a>، يقوم المتصفح بالانتقال التلقائي نحو ذلك القسم فور النقر عليه.
HTML
<!-- Table of Contents Links -->
<div class="toc-links">
<a href="#summary">Overview</a>
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</div>
<!-- Page Blocks with matching IDs -->
<div id="summary"><h2>Overview</h2></div>
<div id="features"><h2>Features</h2></div>
<div id="contact"><h2>Contact Us</h2></div>عند الانتقال إلى قسم عبر رابط التجزئة، تتيح لغة CSS استخدام المحدد الزائف
:target لتسليط الضوء بصرياً على القسم النشط بتغيير لونه أو إبراز حوافه. وبدمج ذلك مع خاصية التمرير الانسيابي scroll-behavior: smooth;، يحصل الزائر على تجربة تصفح سلسة دون الحاجة لمكتبات برمجية خارجية.يعد الالتزام بقواعد التسمية القياسية لخاصيتي
class و id أمراً جوهرياً لضمان مقروئية الكود وتوافقه الشامل عبر كافة المتصفحات. ويجب ألا تحتوي الأسماء على مسافات إطلاقاً، كما ينبغي تجنب الرموز الخاصة، والحرص على أن تعبر التسمية عن وظيفة العنصر ومحتواه لا عن مظهره البصري المؤقت.
HTML
<!-- RECOMMENDED: Semantic kebab-case naming -->
<div class="post-summary" id="featured-post">
<button class="action-btn primary-btn">Submit</button>
</div>
<!-- AVOID: Ephemeral visual or cryptic naming -->
<!-- <div class="red-box-left" id="txt1">Bad Practice</div> -->تمثل صيغة الكباب kebab-case المعيار الأكثر انتشاراً واعتماداً في أوساط الويب العالمية، حيث تكتب الكلمات الإنجليزية بحروف صغيرة وتفصل بشرطات عادية مثل
product-card. ومن الأخطاء الشائعة تسمية العناصر بألوانها مثل blue-box؛ لأن تغيير هوية الموقع اللونية مستقبلاً سيجعل الاسم مضللاً ويتطلب تعديلات برمجية واسعة.قدمت مواصفة HTML5 سمات البيانات المخصصة المسبوقة بالبادئة
data-*، لتوفر وسيلة قياسية ورسمية لتخزين البيانات الوصفية الخاصة مباشرة فوق عناصر المستند. وقضى هذا المعيار على الحيل القديمة المتمثلة في إساءة استخدام خاصية class لتخزين معلومات موجهة لمحركات جافا سكريبت.
HTML
<!-- HTML custom data attributes -->
<div class="user-card"
data-user-id="9421"
data-tier="moderator"
data-active="true">
<h3>User Profile</h3>
</div>
<!-- Access via JavaScript: el.dataset.userId -->يتيح المتصفح الوصول التلقائي لكافة سمات البيانات عبر كائن
dataset في جافا سكريبت، حيث تتحول الأسماء الموصولة بشرطات تلقائياً إلى صيغة سنام الجمل، لتصبح data-user-id قابلة للقراءة عبر el.dataset.userId. كما يمكن استهداف هذه السمات في CSS باستخدام محددات السمات الأنيقة.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية الشاملة لخصائص الفئات والمعرفات في HTML: استغلال class لإعادة التنسيق، وتركيب الفئات المتعددة، وإلزامية تفرد id وتطبيقه في القفز الداخلي والوصول، وقواعد التسمية القياسية، واستخدام سمات data مع كائن dataset. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف العناصر الدلالية ودورها في بناء مستند ويب قياسي وعالي الإتاحة.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 6 مفهومةأول بطاقة، أول خطوة
- 01 Class Attribute خاصية الفئة
- خاصية عامة في HTML تُستخدم لإسناد اسم فئة أو أكثر لعناصر متعددة لتطبيق التنسيقات والمعالجات البرمجية المتكررة.
- للمراجعة
- 02 ID Attribute خاصية المعرف
- خاصية عامة تمنح عنصراً واحداً فقط في الصفحة اسماً فريداً وحصرياً لا يجوز تكراره إطلاقاً في نفس المستند.
- للمراجعة
- 03 CSS Specificity أسبقية محددات CSS
- الميزان الحسابي في CSS الذي يحدد القاعدة التنسيقية التي تفوز وتطبق عند استهداف نفس العنصر بمحددات مختلفة.
- للمراجعة
- 04 Bookmark Link رابط القفز الداخلي
- رابط تشعبي يستخدم رمز المربع للانتقال الفوري داخل الصفحة نحو عنصر محدد يحمل المعرف المستهدف.
- للمراجعة
- 05 Data Attributes سمات البيانات المخصصة
- سمات قياسية في HTML5 تبدأ بالبادئة data-* وتسمح بتخزين بيانات وصفية مخصصة مباشرة فوق عناصر الصفحة.
- للمراجعة
- 06 Dataset Property كائن البيانات البرمجي
- خاصية برمجية في جافا سكريبت تتيح قراءة وتعديل كافة سمات data الخاصة بالعنصر بصيغة سنام الجمل camelCase.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 4 مفهومةأول بطاقة، أول خطوة
- 01 ID ID
- Identifier
- المعرف الفريد الذي يميز عنصراً محدداً بشكل حصري داخل مستند صفحة الويب أو قاعدة البيانات.
- للمراجعة
- 02 BEM BEM
- Block Element Modifier
- منهجية تسمية قياسية في تطوير الواجهات تنظم فئات CSS لضمان بناء واجهات برمجية معيارية قابلة للتوسع.
- للمراجعة
- 03 PII PII
- Personally Identifiable Information
- معلومات الهوية الشخصية الحساسة التي يمكن من خلالها التعرف على هوية الزائر وتتطلب حماية قانونية صارمة.
- للمراجعة
- 04 GDPR GDPR
- General Data Protection Regulation
- اللائحة الأوروبية العامة لحماية البيانات التي تفرض معايير قانونية صارمة على جمع ومعالجة بيانات المستخدمين.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
قم ببناء زر تفاعلي باستخدام فئة أساسية عامة وفئتي تعديل إضافيتين للتحكم في الحجم ودرجة اللون التفاعلية.
-
أنشئ قائمة تنقل داخلية تحتوي على ثلاثة روابط تجزئة تنقل الزائر بسلاسة إلى أقسام تحمل معرفات id فريدة.
-
أضف سمات بيانات مخصصة data-* على بطاقة منتج واقرأ قيمها عبر كائن dataset البرمجي في أدوات المطور.
-
اربط عنصر تسمية label بحقل إدخال نموذج باستخدام خاصية for المتطابقة تماماً مع معرف id الحقل لتعزيز الإتاحة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.