التعليقات في لغة HTMLHTML Comments

التعليقات HTML comments هي أجزاء من النص داخل مستند HTML لا تُعرض في المتصفح، لكنها تسمح بترك ملاحظات أو تفاصيل وتوضيحات مباشرة في الكود. وتُعتبر التعليقات أداة تنظيمية مهمة لمطوري المواقع، حيث تساعد في فهم هيكل الكود وتنظيمه داخل صفحة HTML. وتتيح هذه التعليقات للمطورين توثيق العمل وتسهيل فهم الكود عند مراجعته أو تعديله في المستقبل.

على سبيل المثال، يمكن للمطور إضافة تعليق عند بداية الصفحة ونهايتها، كأن يكتب [Start of page] في البداية و[End of page] في النهاية.

وكذلك عند بداية ونهاية أي قسم، وذلك لمساعدة المطور على تذكر أماكن البداية والنهاية، حيث إنه بعد مرور فترة زمنية قد ينسى المطور بنية الأكواد البرمجية، فتُسهّل التعليقات عملية التذكر والتعديل على المشروع مستقبلًا.

يمكن التعليق مؤقتًا على مقطع صالح لذلك من HTML، فيمنع عرضه كعناصر. لا تضع تعليق HTML داخل وسم فتح أو قيمة خاصية، ولا تستخدمه بدل صياغة تعليقات JavaScript أو CSS، ولا داخل المحتوى النصي الخاص بعناصر title وtextarea.

تُستخدم التعليقات في لغة HTML لـ:

1. توثيق الكود البرمجي Documenting Code: التعليقات تعمل كملاحظات توضيحية في الكود، تساعد في تذكيرك وإعلام الآخرين بوظيفة الكود وكيفية عمله، مما يسهل فهمه لاحقًا.

2. تنظيم الكود Organizing Code: تُساعد التعليقات في سهولة قراءة الكود البرمجي ومنع تداخل الأوامر، حيث يعتبرها معظم مطوري الويب وسيلة فعالة لتنظيم الكود.

3. شرح الغرض Explaining Purpose: تُستخدم التعليقات لوصف النتيجة المقصودة من الأوامر البرمجية أو لشرح سبب استخدام أمر برمجي معين.

4. توضيح الأجزاء المعقدة Clarifying Complex Parts: تُزوّد التعليقات توضيحًا للأجزاء أو الأسطر المعقدة من الكود، مما يسهل على المطورين الآخرين فهم تلك الأجزاء بسرعة.

1. علامة الفتح open tag: تبدأ التعليقات في HTML باستخدام علامة الفتح التي تتكون من علامة أقل من [⁦<⁩]، تليها علامة تعجب [!]، ثم علامتي ناقص [--]. الشكل النهائي هو [⁦<!--⁩].

2. المحتوى content: يمكن أن يحتوي التعليق على نص أو عنصر أو أكثر يتم وضعه بين علامات الفتح والإغلاق. هذا المحتوى لن يظهر في صفحة الويب عند عرضه عبر المتصفح.

3. علامة الإغلاق close tag: تختتم التعليقات بعلامة الإغلاق التي تبدأ بعلامتي ناقص [--] وتنتهي بعلامة أكبر من [⁦>⁩]. الشكل النهائي هو [⁦-->⁩].

الشكل النهائي لبنية التعليق: ⁦<!-- content -->⁩.

قد يتكون التعليق من سطر واحد، أي يمتد على سطر واحد فقط، ولن يتم عرض هذا السطر على المتصفح.

يمكنك إضافة تعليقات في منتصف جملة أو سطر من التعليمات البرمجية في HTML. والنص الموجود بين علامات التعليق [⁦<!-- -->⁩] لن يُعرض في المتصفح، بينما يبقى النص الموجود خارج العلامة كما هو دون تأثير.

يمكن أن تمتد التعليقات عبر عدة سطور باستخدام نفس الصيغة.

يكفي أن يبدأ المقطع بمحدد الفتح وينتهي بمحدد الإغلاق؛ لا يشترط أن يكون أي منهما في بداية سطر أو نهايته.

تختلف الاختصارات بحسب المحرر وتخصيصه. في VS Code يمكن تبديل التعليق باستخدام الاختصارات الافتراضية التالية، وستحتاج إلى استخدام هذه الاختصارات بشكل متكرر. إليك اختصارات التعليقات:

• لمستخدمي Mac: اضغط على [Cmd + /].
  
  
• لمستخدمي Windows و Linux: اضغط على [Ctrl + /].
  
  

لإضافة تعليق على سطر واحد:
حدد السطر ثم اضغط على مفتاتيح الاختصار المُلائمة لجهازك في محرر النصوص.

لإضافة تعليق متعددة الأسطر:
قم بتحديد النص أو الأكواد التي تريد تعليقها، ثم اضغط على نفس مجموعة المفاتيح، ويضيف المحرر صيغة التعليق المناسبة للغة والتحديد؛ لا يلزم أن يصبح كل سطر تعليقًا مستقلًا.

قواعد استخدام التعليقات مع الأمثلة Rules for using comments with examples:

1. لا يمكن وضع تعليق داخل تعليق آخر في HTML.

مثال خاطئ: ⁦<!-- هذا تعليق <!-- داخل تعليق آخر --> -->⁩

2. يسمح HTML بوجود -- داخل نص التعليق إذا لم يشكل محددًا محظورًا؛ منع -- مطلقًا من قواعد XML وليس HTML.

مثال صالح في HTML: ⁦<!-- نص -- داخل تعليق -->⁩

3. المسافات بعد محدد الفتح وقبل محدد الإغلاق مسموحة؛ اختر أسلوبًا مقروءًا ومتسقًا.

مثال صالح: ⁦<!-- تعليق مع مسافة -->⁩
مثال صالح أيضًا: ⁦<!--تعليق بدون مسافة-->⁩