عناصر HTML
أنت تعرف بالفعل هيكل المستند الأساسي. تركز هذه الحصة على لبنات البناء داخل الصفحة: عناصر HTML. كل عنوان وفقرة ومعظم أجزاء الصفحة الأخرى عناصر.
ما هو عنصر HTML؟
عنصر HTML وحدة ترميز كاملة. لمعظم العناصر التي تلف المحتوى ثلاثة أجزاء:
- وسم بداية (فتح) — مثلاً
<p> - المحتوى — النص أو العناصر المتداخلة داخله
- وسم نهاية (إغلاق) — مثلاً
</p>
معاً،<p>مرحبا</p>عنصر فقرة واحد.
إجابة مباشرة
يعني عنصر HTML عادة وسم بداية، ومحتوى اختياري، ووسم نهاية متطابقين. يستخدم المتصفح هذا الزوج لمعرفة أين يبدأ العنصر وأين ينتهي. بعض العناصر الفارغة لا تلف محتوى ولذلك لا تستخدم وسم نهاية منفصلاً.
عنصر بوسم بداية ومحتوى ووسم نهاية
html<p>هذا عنصر فقرة.</p>
<h1>هذا عنصر عنوان.</h1>قراءة المثال
<p>يفتح عنصر فقرة- النص بين الوسمين هو المحتوى
</p>يغلق الفقرة- يعمل العنوان بالطريقة نفسها مع
<h1>و</h1>
العناصر المتداخلة
يمكن أن تجلس العناصر داخل عناصر أخرى. هذا يسمى التداخل. يجب فتح العنصر الداخلي وإغلاقه بالكامل قبل إغلاق العنصر الخارجي.
عناصر متداخلة
html<p>تحتوي هذه الفقرة على كلمة <strong>مهمة</strong>.</p>هنا يتداخل عنصر strong داخل عنصر p. يتيح التداخل تعليم المعنى داخل أجزاء أكبر من المحتوى. أبقِ الشجرة نظيفة: لا تتقاطع الوسوم مثل فتح p ثم strong ثم إغلاق p قبل strong.
العناصر الفارغة (void)
بعض العناصر لا تلف محتوى. غالباً تُسمى فارغة أو void. مثال شائع للمبتدئين هو فاصل السطر:
عنصر br فارغ
html<p>السطر الأول.<br>السطر الثاني.</p>ينشئ وسم <br> فاصل سطر. ليس له وسم إغلاق منفصل ولا نص داخلي. لاحقاً ستلتقي بعناصر فارغة أخرى مثل الصور. تذكّر الآن: ليس كل عنصر يشبه شطيرة بداية-محتوى-نهاية.
الوسم مقابل العنصر
يقول الناس أحياناً «وسم» و«عنصر» كأنهما شيء واحد. الوسم هو الترميز داخل الأقواس الزاوية. العنصر هو الوحدة الكاملة التي يفهمها المتصفح — غالباً وسم بداية + محتوى + وسم نهاية. قول «عنصر p» يعني عادة وحدة الفقرة كاملة.
جرّب بنفسك
- افتح ملف HTML الأساسي لديك
- أضف فقرة بنص
strongمتداخل - أضف فقرة ثانية تستخدم
<br>بين سطرين قصيرين - احفظ وحدّث المتصفح
- تأكد أن النص العريض وفاصل السطر يظهران كما تتوقع
أخطاء شائعة
- نسيان وسم الإغلاق للعناصر التي تحتاجه
- تقاطع الوسوم بدل التداخل النظيف
- معاملة كل وسم وكأنه يجب أن يملك محتوى ووسم نهاية (العناصر الفارغة تختلف)
- اسم إغلاق خاطئ، مثل إقران
</p>مع<h1> - وضع محتوى الصفحة المرئي خارج
body
ملخص
- تستخدم معظم عناصر HTML وسم بداية ومحتوى ووسم نهاية
- يجب إغلاق العناصر المتداخلة بالترتيب الصحيح
- العناصر الفارغة مثل
brلا تلف محتوى - الوسم علامة بين أقواس؛ العنصر الوحدة الكاملة
- تدرّب على التداخل وفاصل سطر بسيط في صفحتك
- السمات التي تضيف معلومات إضافية للوسوم تأتي في الحصة التالية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى