شرح عناصر HTML للمبتدئين بالعربي — كيف تعمل الوسوم؟
تعلمنا في الدرس السابق هيكل صفحة HTML. الآن سنفهم شيئاً أعمق: ما هو العنصر بالضبط؟ وما الفرق بين العنصر والوسم؟ وما هي العناصر الفارغة؟ هذا الدرس سيجعلك تفهم HTML كما يفهمها المطورون المحترفون.
العنصر والوسم — ما الفرق؟
كثير من المبتدئين يخلطون بين كلمتَي "وسم" و"عنصر". إليك الفرق البسيط:
- الوسم (Tag): هو النص الذي يُكتب داخل
< >— مثل<p>أو<h1>. - العنصر (Element): هو وسم البداية + المحتوى + وسم النهاية مجتمعةً معاً.
<!-- هذا وسم بداية -->
<p>
<!-- هذا عنصر كامل: وسم بداية + محتوى + وسم نهاية -->
<p>هذا نص داخل العنصر.</p>
تشبيه بسيط: الوسم هو الأقواس، والعنصر هو كل شيء داخل الأقواس وبينهما مجتمعاً. تماماً مثل جملة: القوسان هما "( )" والعنصر هو "(الكلام الكامل بداخلهما)".
تشريح عنصر HTML — ثلاثة أجزاء
كل عنصر HTML يتكون من ثلاثة أجزاء:
<h1>أهلاً بك في عالم HTML!</h1>
| الجزء | في المثال | وظيفته |
|---|---|---|
| وسم البداية | <h1> |
يُخبر المتصفح: "ابدأ هنا وطبّق نوع هذا العنصر" |
| المحتوى | أهلاً بك في عالم HTML! | هو النص أو الصورة أو أي شيء يظهر على الصفحة |
| وسم النهاية | </h1> |
يُخبر المتصفح: "انتهى هذا العنصر هنا" |
العناصر المتداخلة — عناصر داخل عناصر
عناصر HTML يمكن أن توضع بداخل بعضها البعض. هذا ما يُسمى التداخل (Nesting). في الواقع، كل صفحات الويب هي مجرد عناصر متداخلة.
<body>
<h1>عنوان الصفحة</h1>
<p>هذا نص يحتوي على كلمة <strong>مهمة جداً</strong> داخله.</p>
</body>
في هذا المثال:
<body>يحتوي على<h1>و<p><p>يحتوي بداخله على<strong>
<!-- ✅ صحيح — الداخلي يُغلق أولاً -->
<p>كلمة <strong>مهمة</strong> في الجملة.</p>
<!-- ❌ خطأ — التقاطع غير مسموح به -->
<p>كلمة <strong>مهمة</p></strong>
العناصر الفارغة — بدون محتوى وبدون إغلاق
توجد في HTML عناصر لا تحتاج إلى محتوى ولا إلى وسم إغلاق. تسمى العناصر الفارغة (Empty Elements) أو الذاتية الإغلاق.
أشهر الأمثلة:
| الوسم | وظيفته |
|---|---|
<br> |
سطر جديد (Line Break) — مثل الضغط على Enter |
<hr> |
خط أفقي فاصل (Horizontal Rule) |
<img> |
عرض صورة — لا يحتاج وسم إغلاق |
<input> |
حقل إدخال في النماذج |
<meta> |
معلومات خفية عن الصفحة داخل head |
<link> |
ربط ملفات خارجية كـ CSS |
<!-- مثال على عناصر فارغة -->
<p>السطر الأول<br>السطر الثاني بعد فاصل سطر</p>
<hr>
<img src="logo.png" alt="شعار الموقع">
لاحظ:<br>لا يحتوي على نص ولا على</br>— هو مجرد تعليمة سريعة للمتصفح.
حالة الأحرف في الوسوم — كبيرة أم صغيرة؟
HTML لا تفرق بين الأحرف الكبيرة والصغيرة في الوسوم. المتصفح يفهم <P> و<p> بنفس الطريقة.
<!-- كلها تعمل بنفس الطريقة -->
<P>فقرة</P>
<p>فقرة</p>
<P>فقرة</p>
لكن المعيار المتفق عليه بين كل مطوري العالم هو الكتابة بـأحرف صغيرة دائماً. هذا ما توصي به منظمة W3C (المنظمة المسؤولة عن معايير الويب). التزم به من البداية لتكتب كوداً احترافياً.
مقارنة سريعة — عنصر عادي مقابل عنصر فارغ
| النوع | مثال | وسم الإغلاق | يحتوي على محتوى؟ |
|---|---|---|---|
| عنصر عادي | <p>نص</p> |
✅ نعم | ✅ نعم |
| عنصر عادي | <h1>عنوان</h1> |
✅ نعم | ✅ نعم |
| عنصر فارغ | <br> |
❌ لا | ❌ لا |
| عنصر فارغ | <img src="..."> |
❌ لا | ❌ لا |
الأسئلة الشائعة — FAQ
كم عدد وسوم HTML الموجودة؟
HTML5 تحتوي على أكثر من 100 وسم رسمي. لكن لا تخف — 90% من مواقع الويب الحقيقية تعتمد على أقل من 20 وسماً أساسياً فقط. ستتعلمها تدريجياً خلال هذا الكورس.
هل يجب أن أحفظ كل الوسوم؟
لا. المطورون المحترفون أنفسهم يراجعون المرجع باستمرار. ما يهم هو أن تفهم كيف تعمل الوسوم، وليس حفظها عن ظهر قلب. التطبيق المستمر هو ما يُرسّخها في ذاكرتك.
ماذا يحدث إذا وضعت وسوماً غير موجودة في HTML؟
المتصفح لن يُظهر خطأ، لكنه سيتجاهل الوسم غير المعروف تماماً. مثلاً <mywsm>نص</mywsm> — سيعرض النص فقط بدون أي تنسيق. لذلك استخدم دائماً الوسوم الرسمية المعتمدة.
هل <br> و<br/> نفس الشيء؟
في HTML5 الحديثة: نعم، كلاهما يعمل بنفس الطريقة. كتابة <br> بدون شرطة هي الطريقة المفضلة في HTML5. أما <br/> فكانت المعيار في XML/XHTML القديم.