6 – العناصر الفارغة (مثل
, ) – العناصر (Elements) والوسوم (Tags) – المستوى الاول

بواسطةahmed

📌 العناصر الفارغة في HTML (Empty Elements)

🔹 ما هي العناصر الفارغة؟

  • العناصر الفارغة هي وسوم (Tags) ما بتحتويش على محتوى داخلي، وبالتالي ما بتحتاجش “وسم بداية” و “وسم نهاية”.

  • بتُكتب كوسم واحد فقط.

  • المتصفح يتعامل معاها كتعليمة مستقلة.

🔹 لماذا سُمّيت “فارغة”؟

لأنها لا تحتوي نصوص أو عناصر داخلها.
يعني:

  • الوسم مش بيغلف محتوى.

  • إنما مجرد “تعليمة” للمتصفح.

🔹 أمثلة على العناصر الفارغة:

1. وسم السطر الجديد <br>

🔎 النتيجة: النص ينقسم لسطرين.

2. وسم الصورة <img>

  • src → يحدد رابط أو مسار الصورة.

  • alt → نص بديل يظهر لو الصورة ما اتحملت. (مهم جدًا للـ SEO وإمكانية الوصول).

  • width و height → لتحديد أبعاد الصورة.

3. وسم الخط الفاصل <hr>

🔎 النتيجة: خط أفقي يفصل بين الفقرتين.

4. وسم الميتا <meta>

  • يُستخدم داخل <head> لتحديد معلومات عن الصفحة (الترميز، الوصف، الكلمات المفتاحية…).

  • لا يحتوي أي نص داخلي.

5. وسم الرابط الخارجي <link>

  • يُستخدم لربط ملف خارجي (غالبًا CSS).

  • موجود في <head>.

🔹 ملاحظات مهمة:

  1. بعض الناس بيكتبوا العناصر الفارغة بنهاية ذاتية (Self-closing) خاصة في XHTML:

  3. لكن في HTML5 العادي يكفي تكتبها بدون /.

  5. العناصر الفارغة لا يمكن أن تحتوي محتوى أو وسوم بداخلها.
    ❌ غلط:

  1. المتصفح يتوقع أن هذه الوسوم تقف عند نفسها وتنفذ وظيفتها فورًا.

🔹 تشبيه مبسط

  • العناصر العادية = صندوق تفتحه وتغلقه وتحط فيه محتوى.

  • العناصر الفارغة = أداة صغيرة بتدي أمر سريع (زي زرار تشغيل النور، مجرد كبسة واحدة).

 

🔹 قائمة أشهر العناصر الفارغة في HTML5

  • <br> → كسر السطر

  • <img> → صورة

  • <hr> → خط فاصل

  • <meta> → بيانات وصفية

  • <link> → ربط ملفات خارجية

  • <input> → حقول الإدخال في النماذج

  • <source> → تحديد مصدر لملفات الصوت والفيديو

  • <area> → تحديد منطقة تفاعلية داخل صورة

 

★ ★ ★ ★ ★
التقييم: 0 من 0 تصويت

موضوعات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *