ما هو ال id

ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل.

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

المعرف id هو معرف فريد (unique identifier) يُخصص لعنصر واحد فقط في الصفحة. لا يمكن أن يتكرر نفس المعرف على عناصر أخرى في نفس الصفحة.

   <div id="header">هذا رأس الصفحة</div>

يُستخدم id لتحديد عنصر معين لتطبيق تنسيقات CSS عليه.

   #header {
       background-color: blue;
       color: white;
   }

يُمكن استخدام id للوصول إلى عنصر معين وتعديله باستخدام JavaScript.

   document.getElementById("header").innerHTML = "تم تغيير النص!";

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

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

1. يجب أن يكون اسم المعرف id فريدًا في الصفحة.
2. يُفضل استخدام class إذا كنت تريد تطبيق نفس التنسيق على عدة عناصر.
3. الأسماء يجب أن تكون وصفية وتتبع قواعد التسمية (مثل عدم البدء برقم).

أولا لن تضح لك فكرة ال id فقط من خلال HTML حيث إستعماله أكثر من خلال جافاسكريبت و CSS .

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

فلاحظ أن انه لا يمكن إعطاء نفس ال id لعنصرين في نفس الصفحة وإلا سيتم إعتبار أول عنصر هو صاحب هذا ال id .

من خلال CSS تستطيع تنسيق هذا العنصر من خلال ال id حيث يمكنك وضع علامة # قبل إسم ال id لإعطاء هذا العنصر تنسيقات.

ومن خلال الجافاسكريبت تستطيع إمساك العنصر والتلاعب به بسهوله من خلال ال id .

ببساطة فكر في id كأنه رقم هوية فريد لكل عنصر في صفحة الويب. تماماً مثل رقم هويتك الشخصية الذي لا يمكن أن يكون لشخص آخر، وكل عنصر HTML يمكن أن يحمل id فريد لا يتكرر في نفس الصفحة.

وبالنسبة لاستخدامات ال id فهي بالفعل يتكون واضحة من خلال ال css وال javascript ولكن هناك بعض الاستخدامات الأخرى مثل 

إنشاء روابط تنتقل مباشرة لجزء معين في نفس الصفحة

<!-- الرابط -->
<a href="#قسم-عني<"قسم-عني</a>

<!-- العنصر المستهدف في مكان آخر بالصفحة -->
<h2 id="قسم-عني<"قسم-عني</h2>
<p>هنا أكتب معلومات عن نفسي...</p>