ما هي Entities في HTML؟ 🧩

تخيل أنك تريد كتابة علامة "أكبر من" (<) أو "أصغر من" (>) كنص عادي في صفحة ويبك. إذا كتبتها مباشرة، سيعتقد المتصفح أنها جزء من كود HTML وسيحاول تفسيرها كعلامة (Tag)، مما يتسبب في أخطاء. هنا تأتي دور الكيانات (Entities) لتنقذ الموقف!

الكيانات (Entities) في HTML هي رموز خاصة تبدأ بعلامة & وتنتهي بفاصلة منقوطة ; تُستخدم لعرض الأحرف المحجوزة أو الخاصة التي لها معنى خاص في لغة HTML، أو لعرض رموز لا يمكن كتابتها مباشرة من لوحة المفاتيح.

لماذا نحتاج إلى استخدام الكيانات؟ ❓

هناك سببان رئيسيان لاستخدام الكيانات:

  1. عرض الرموز المحجوزة (Reserved Characters): مثل < و > و & و " و '. هذه الرموز تستخدم في بناء جملة HTML نفسها، لذا يجب "تهريبها" (Escape) باستخدام كيانات ليعرضها المتصفح كنص وليس ككود.
  2. عرض رموز غير موجودة على لوحة المفاتيح: مثل رموز العملات (€, £)، ورموز الرياضيات (∑, ∞)، ورموز أخرى مثل © و ®.

بدون استخدام الكيانات، قد لا تعرض صفحتك بشكل صحيح أو قد تتعطل هيكلتها بالكامل!

أشهر كيانات HTML التي يجب أن تعرفها 🎯

لنبدأ بأهم الكيانات التي ستواجهك باستمرار أثناء كتابة HTML.

1. الكيانات الخاصة بالرموز المحجوزة

هذه هي الكيانات الأكثر أهمية والأكثر استخداماً على الإطلاق.

الرمز الكيان (Entity) الاسم (Name) الوصف
< &lt; Less Than لعرض علامة "أصغر من"
> &gt; Greater Than لعرض علامة "أكبر من"
& &amp; Ampersand لعرض رمز "الواو" نفسه
" &quot; Quotation Mark لعرض علامة الاقتباس المزدوجة
' &apos; Apostrophe لعرض علامة الفاصلة العليا (غير مدعومة في HTML4)

مثال عملي:

لنفترض أنك تريد كتابة جملة: "لإنشاء فقرة في HTML نستخدم العنصر <p>."

إذا كتبتها هكذا مباشرة في الكود:

<p>لإنشاء فقرة في HTML نستخدم العنصر <p>.</p>

سيقرأ المتصفح علامة <p> الداخلية كبداية لعنصر فقرة جديد، وسيظهر النص بشكل خاطئ.

الحل الصحيح باستخدام الكيان:

<p>لإنشاء فقرة في HTML نستخدم العنصر &lt;p&gt;.</p>

النتيجة في المتصفح ستكون: لإنشاء فقرة في HTML نستخدم العنصر .

2. كيانات الرموز الشائعة الأخرى

هناك المئات من الكيانات لعرض رموز مختلفة. إليك بعض الأشهر:

الرمز الكيان (Entity) الاسم (Name) الوصف
© &copy; Copyright رمز حقوق النشر
® &reg; Registered Trademark رمز العلامة التجارية المسجلة
€ &euro; Euro رمز عملة اليورو
£ &pound; Pound رمز عملة الجنيه الإسترليني
• &bull; Bullet نقطة للتعداد النقطي
  &nbsp; Non-Breaking Space مسافة غير قابلة للكسر (تجنب ابتعاد الكلمات)

مثال عملي:

<p>حقوق النشر &copy; All Rights Reserved for Codex Academy</p>
<p>سعر المنتج هو 50 &euro;.</p>

النتيجة في المتصفح ستكون: حقوق النشر © All Rights Reserved for Codex Academy سعر المنتج هو 50 €.

أنواع كتابة الكيانات: بالاسم أو بالرقم

لاحظ أن الكيانات التي استخدمناها حتى الآن كُتبت باستخدام اسم (Name)، مثل &copy;. ولكن هناك طريقة أخرى لكتابة الكيانات باستخدام رقم (Number)، ويسمى أحياناً "مرجع رقمي".

  • بالاسم (Named Entity): &entity_name; (أسهل للتذكر).
  • بالرقم (Numeric Entity): &#entity_number; (أكثر موثوقية حيث تدعمه جميع المتصفحات).

مقارنة بين الطريقتين لنفس الرمز:

الرمز الكيان بالاسم الكيان بالرقم
© &copy; &#169;
€ &euro; &#8364;

كقاعدة عامة، استخدم الكيانات بالاسم إذا كانت معروفة وسهلة التذكر، فهي أوضح في قراءة الكود.

خلاصة الدرس ✅

  • الكيانات (Entities) (&name;) هي الحل الأمثل لعرض الرموز الخاصة في HTML.
  • الاستخدام الرئيسي هو عرض الرموز المحجوزة مثل < (&lt;) و & (&amp;) لتجنب أخطاء المتصفح.
  • يمكنك استخدامها أيضاً لعرض رموز غير موجودة على لوحة المفاتيح مثل © و €.
  • هناك طريقتان لكتابة الكيانات: بالاسم (مثل &copy;) أو بالرقم (مثل &#169;).