6 – العناصر الفارغة (مثل
, ![]()
) – العناصر (Elements) والوسوم (Tags) – المستوى الاول
📌 العناصر الفارغة في HTML (Empty Elements)
🔹 ما هي العناصر الفارغة؟
-
العناصر الفارغة هي وسوم (Tags) ما بتحتويش على محتوى داخلي، وبالتالي ما بتحتاجش “وسم بداية” و “وسم نهاية”.
-
بتُكتب كوسم واحد فقط.
-
المتصفح يتعامل معاها كتعليمة مستقلة.
🔹 لماذا سُمّيت “فارغة”؟
لأنها لا تحتوي نصوص أو عناصر داخلها.
يعني:
-
الوسم مش بيغلف محتوى.
-
إنما مجرد “تعليمة” للمتصفح.
🔹 أمثلة على العناصر الفارغة:
1. وسم السطر الجديد <br>
🔎 النتيجة: النص ينقسم لسطرين.
2. وسم الصورة <img>
-
src → يحدد رابط أو مسار الصورة.
-
alt → نص بديل يظهر لو الصورة ما اتحملت. (مهم جدًا للـ SEO وإمكانية الوصول).
-
width و height → لتحديد أبعاد الصورة.
3. وسم الخط الفاصل <hr>
-
يُستخدم داخل <head> لتحديد معلومات عن الصفحة (الترميز، الوصف، الكلمات المفتاحية…).
-
لا يحتوي أي نص داخلي.
5. وسم الرابط الخارجي <link>
-
يُستخدم لربط ملف خارجي (غالبًا CSS).
-
موجود في <head>.
🔹 ملاحظات مهمة:
-
بعض الناس بيكتبوا العناصر الفارغة بنهاية ذاتية (Self-closing) خاصة في XHTML:
-
لكن في HTML5 العادي يكفي تكتبها بدون /.
-
العناصر الفارغة لا يمكن أن تحتوي محتوى أو وسوم بداخلها.
❌ غلط:
-
المتصفح يتوقع أن هذه الوسوم تقف عند نفسها وتنفذ وظيفتها فورًا.
🔹 تشبيه مبسط
-
العناصر العادية = صندوق تفتحه وتغلقه وتحط فيه محتوى.
-
العناصر الفارغة = أداة صغيرة بتدي أمر سريع (زي زرار تشغيل النور، مجرد كبسة واحدة).
🔹 قائمة أشهر العناصر الفارغة في HTML5
-
<br> → كسر السطر
-
<img> → صورة
-
<hr> → خط فاصل
-
<meta> → بيانات وصفية
-
<link> → ربط ملفات خارجية
-
<input> → حقول الإدخال في النماذج
-
<source> → تحديد مصدر لملفات الصوت والفيديو
-
<area> → تحديد منطقة تفاعلية داخل صورة
Call now
Contact WhatsApp
