جاري التحميل...

id في HTML

بعد class يأتي id لاسم عنصر واحد فريد.

لماذا الأسماء الفريدة مهمة

الروابط والأدوات تفترض تطابقاً واحداً.

إجابة مباشرة

id="faq" على عنصر واحد. href="#faq". في CSS #faq. لا تكرر id ولا تكتب id="#faq".

📊 id versus class

Feature id class
Uniqueness One per page (ideally) Many elements may share
HTML attribute id="faq" (no #) class="tip" (no .)
CSS selector #faq .tip
Common uses Bookmarks, unique hooks, script targets Reusable styles and groups

رابط fragment إلى عنوان فريد

رابط أعلى وعنوان أسفل بنفس الاسم.

Unique id and fragment link

html
<p><a href="#faq">Jump to FAQ</a></p>
<h2 id="faq">FAQ</h2>
<p>Answers go here.</p>

قراءة مثال fragment

  • في الرابط فقط

  • id عارٍ في السمة

خطاف CSS فريد بـ #id

لوحة واحدة بارزة — بحذر.

Unique id with CSS

html
<div id="promo">
<h2>Limited offer</h2>
<p>One panel, one unique hook.</p>
</div>
<style>
#promo { border: 2px solid #0a7; padding: 12px; }
</style>

قراءة مثال النمط الفريد

  • promo في CSS

  • لا # داخل السمة

اختيار id أو class

أكثر من عنصر؟ class. هدف واحد؟ id.

تمرين

  1. عنوان بـ id
  2. رابط # والقفز
  3. أزل التكرار
  4. استخدم class لمظهر مشترك

أخطاء شائعة

  • id مكرر
  • داخل السمة

  • id لكل نمط مشترك

ملخص

  • id فريد
  • في الرابط وCSS

  • class للمشاركة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
6
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى