شرح أوامر HTML - الوسوم (Tags)

يمكن تشبيه ملف HTML بـ "نص مسرحي".

• المحتوى (Content): هو الحوار الذي يقوله الممثلون (مثال: "مرحباً بالعالم").
• الوسم (Tag): هو "الإرشاد المكتوب" من المخرج للممثل (مثال: (يقولها بصوت عالٍ وغاضب)).

الجمهور (زائر الموقع) لا يسمع المخرج وهو يقول "قلها بصوت عالٍ"، بل يسمع "نتيجة" هذا الأمر (الممثل وهو يصرخ "مرحباً بالعالم").

بالمثل، المتصفح يقرأ الوسم <h1> (وهو أمر يعني "اجعل هذا النص كبيراً وواضحاً")، فيقوم بعرض المحتوى مرحباً بالعالم بخط كبير، دون أن يُظهر الوسم <h1> نفسه على الشاشة.

عندما يبدأ المتصفح في قراءة ملف HTML، فإنه يعتبر كل شيء نصاً عادياً... إلى أن يصطدم برمز <.

عندما يرى <، فإنه يتوقف عن "العرض" ويدخل في "وضع الاستماع للأوامر". يبدأ في قراءة ما بداخل القوس ليفهم ما هو الأمر المطلوب منه (مثل `p` أو `h1`).

عندما يصل إلى رمز >، فإنه يفهم أن "الأمر قد اكتمل"، فيقوم بتنفيذه، ثم يعود إلى "وضع العرض" العادي للنص الذي يليه.

تم اختيارها لأنها نادراً ما تُستخدم في الكتابة العادية (النثر). هذا يجعلها مثالية للعمل كـ "علامات تنبيه" للمتصفح دون أن تتعارض مع المحتوى الفعلي.

يمكن التفكير في الوسم المزدوج كشطيرة:

• وسم الفتح <p>: هو قطعة الخبز العلوية.
• المحتوى هذا نص...: هو الحشوة (اللحم، الجبن).
• وسم الإغلاق </p>: هو قطعة الخبز السفلية.

لا يمكنك الحصول على شطيرة (عنصر مكتمل) بقطعة خبز واحدة فقط. أنت بحاجة إلى بداية ونهاية لتحديد أين تبدأ الحشوة وأين تنتهي.

"المحتوى" الموجود داخل الوسم الحاوي يمكن أن يكون:

• نصاً بسيطاً (كما في مثال الشطيرة).
• وسوماً أخرى (وهذا ما يُعرف بـ "التداخل" - Nesting، وسنناقشه لاحقاً).

الصيغة: <[TagName]>

أمثلة: <h1>، <p>، <div>

وظيفته: إبلاغ المتصفح بـ "البدء". (مثال: "من هذه النقطة، ابدأ في تطبيق قاعدة 'الخط الكبير'").

الصيغة: </[TagName]>

أمثلة: </h1>، </p>، </div>

وظيفته: إبلاغ المتصفح بـ "التوقف". (مثال: "من هذه النقطة، توقف عن تطبيق قاعدة 'الخط الكبير' وعد إلى الوضع الطبيعي").

• الخطأ الأول: نسيان الشرطة المائلة.
  الكتابة: <p>نص<p>
  كيف يراها المتصفح: "افتح وسم فقرة"، "اعرض نص"، "افتح وسم فقرة جديد". لم يتم إغلاق الوسم الأول أبداً. هذا يسبب فوضى في التنسيق.
• الخطأ الثاني: استخدام الشرطة المائلة العكسية (\).
  الكتابة: <\p>
  هذا رمز خاطئ تماماً. الشرطة المائلة العكسية تُستخدم في مسارات الملفات (C:\Files)، وليست لها أي معنى في صيغة HTML.
• الخطأ الثالث: وضع الشرطة في المكان الخاطئ.
  الكتابة: <p/>
  هذه صيغة مختلفة تماماً (تُستخدم للوسوم الفارغة في معايير XHTML القديمة) ولا تعمل كوسم إغلاق لوسم حاوٍ.

• <h1>: هو غمس الفرشاة في علبة "الدهان الأحمر الكبير".
• المحتوى: هو الجدار الذي تقوم بطلائه.
• </h1>: هو وضع الفرشاة الحمراء جانباً والإمساك بفرشاة "الدهان الأسود العادي".

ماذا يحدث لو نسيت وسم الإغلاق </h1>؟

سيستمر المتصفح في "الطلاء باللون الأحمر الكبير" إلى الأبد. كل شيء يأتي بعده (فقرات أخرى، صور، روابط) سيحاول المتصفح تطبيق تنسيق "العنوان الكبير" عليه، مما يدمر تصميم الصفحة بالكامل.

الكود الصحيح (مع إغلاق):
<h1>هذا عنوان</h1>
<p>وهذه فقرة عادية.</p>
النتيجة: عنوان كبير، متبوع بفقرة عادية.

الكود الخاطئ (بدون إغلاق):
<h1>هذا عنوان
<p>وهذه فقرة عادية.</p>
النتيجة (المحتملة): سيظهر العنوان والفقرة العادية كلاهما بخط كبير، لأن المتصفح لم يتلق أمراً بـ "التوقف" عن تطبيق تنسيق <h1>.

• <br> (Line Break):
  هذا الوسم يعني "انزل سطراً جديداً الآن". لا يوجد "محتوى" يمكن تغليفه. هو نفسه الأمر.
• <img> (Image):
  هذا الوسم يعني "أدرج صورة هنا". (سنتعلم كيف نحدد "أي" صورة لاحقاً). لا يوجد محتوى "داخله"، بل هو يضع شيئاً في مكانه.
• <hr> (Horizontal Rule):
  هذا الوسم يعني "ارسم خطاً أفقياً هنا".

بما أنها لا تحتوي على محتوى، فهي لا تحتاج إلى وسم إغلاق.

الكتابة الصحيحة: <br>

الكتابة الخاطئة: <br>...</br> (هذا غير صحيح ولا معنى له).

ملاحظة تاريخية: في المعايير القديمة (XHTML)، كان يجب كتابتها مع شرطة مائلة ذاتية: <br />. في معيار HTML5 الحديث، كلاهما (<br> و <br />) يعمل، ولكن الأبسط والأكثر شيوعاً هو <br>.

تخيل أن لديك "صندوقاً كبيراً" (وسم <div>) وتريد وضع "صندوق صغير" (وسم <p>) بداخله.

التسلسل المنطقي (صحيح):

1. تفتح الصندوق الكبير: <div>
2. تفتح الصندوق الصغير: <p>
3. تضع المحتوى في الصندوق الصغير: ...نص...
4. تُغلق الصندوق الصغير أولاً: </p>
5. ثم تُغلق الصندوق الكبير: </div>

الكود الصحيح: <div><p>...نص...</p></div>

التسلسل غير المنطقي (خاطئ):

1. تفتح الصندوق الكبير: <div>
2. تفتح الصندوق الصغير: <p>
3. تضع المحتوى...
4. تحاول إغلاق الصندوق الكبير (رغم أن الصندوق الصغير ما زال مفتوحاً!): </div>
5. ثم تغلق الصندوق الصغير: </p>

هذا مستحيل فيزيائياً، وهو أيضاً "غير قانوني" في HTML.

الكود الخاطئ: <div><p>...نص...</div></p> (تداخل فوضوي).

قد "يحاول" المتصفح تخمين ما تقصده وتصحيح الخطأ، ولكنه غالباً سيفشل، مما يؤدي إلى انهيار التصميم.

هل <p> هو نفسه <P> أو <P>؟

الإجابة الفنية: في معيار HTML5 الحديث، المتصفحات لا تهتم بحالة الأحرف (Case-Insensitive) وستتعامل معها جميعاً على أنها نفس الوسم.

الإجابة الاحترافية: لا تفعل ذلك أبداً. "المعيار المتعارف عليه" (Convention) عالمياً هو كتابة جميع وسوم HTML بأحرف صغيرة (lowercase).

لماذا؟

• الاتساق: الكود الذي يخلط بين الأحرف الكبيرة والصغيرة فوضوي وصعب القراءة.
• التوافقية: المعايير الأكثر صرامة (مثل XHTML أو XML) "تهتم" بحالة الأحرف (Case-Sensitive)، لذا فإن التعود على الأحرف الصغيرة يجعلك مبرمجاً أفضل للمستقبل.

هل يمكن وضع مسافات داخل الأقواس المعقوفة؟

خاطئ: < p > أو < /p >

صحيح: <p> أو </p>

القاعدة: يجب أن يلتصق اسم الوسم بـ < مباشرة. ويجب أن يلتصق / بـ < مباشرة في وسم الإغلاق.

إذا وضعت مسافة < p>، فإن معظم المتصفحات ستفشل في التعرف عليها كوسم وستقوم بطباعة < p> على الشاشة كنص عادي. (ملاحظة: المسافات "بعد" اسم الوسم <p class="x"> مسموحة وتُستخدم لـ "الخصائص" (Attributes)، وهو موضوع لدرس آخر متقدم جداً).