شرح التعليقات في HTML بالعربي — كتابة ملاحظات الكود
كلما كبر مشروعك وطال كودك، كلما احتجت إلى أداة تساعدك على فهم ما كتبته. هذه الأداة تُسمى التعليق (Comment). التعليق هو نص تكتبه داخل الكود — المتصفح يتجاهله تماماً ولا يعرضه للزائر — لكنه يظل مرئياً لك أنت وزملائك في الكود.
ما هو التعليق في HTML؟
تخيّل أنك تقرأ كتاباً وتريد أن تكتب ملاحظة بالقلم الرصاص على الهامش. الملاحظة لك وحدك، ولا تُطبع في الكتاب الرسمي. هذا بالضبط ما يفعله التعليق في HTML.
تعريف بسيط: التعليق هو نص تكتبه بين وسمَي خاصَّين في HTML — يظهر في الكود لكنه لا يظهر أبداً على صفحة المتصفح.
صيغة التعليق — كيف يُكتب؟
التعليق في HTML يبدأ بـ <!-- وينتهي بـ --> :
<!-- هذا تعليق — لن يظهر في المتصفح أبداً -->
<p>هذه فقرة ستظهر للزائر.</p>
<!-- ويمكنك وضع التعليق في أي مكان في الكود -->
إذا فتحت هذا الكود في المتصفح، ستجد أن الصفحة تعرض فقط:
هذه فقرة ستظهر للزائر.التعليق متعدد الأسطر
يمكن للتعليق أن يمتد على عدة أسطر:
<!--
هذا تعليق طويل
يمتد على عدة أسطر
مفيد لشرح أجزاء كبيرة من الكود
-->
<h1>عنوان الصفحة</h1>
لماذا نستخدم التعليقات؟
للتعليقات ثلاثة استخدامات رئيسية:
1. شرح الكود لنفسك أو لزملائك
<!-- قسم الترويسة الرئيسية -->
<header>
<h1>موقع DevArabi</h1>
</header>
<!-- قسم المحتوى الرئيسي -->
<main>
<p>مرحباً بك في موقعنا.</p>
</main>
<!-- قسم التذييل -->
<footer>
<p>جميع الحقوق محفوظة 2025</p>
</footer>
2. تعطيل جزء من الكود مؤقتاً
بدلاً من حذف كود قد تحتاجه لاحقاً، تضعه داخل تعليق لإيقافه مؤقتاً:
<!-- الصورة القديمة — معطّلة مؤقتاً -->
<!-- <img src="/images/old-logo.png" alt="الشعار القديم"> -->
<!-- الصورة الجديدة -->
<img src="/images/new-logo.png" alt="الشعار الجديد">
3. تنظيم الصفحة وتقسيمها إلى أقسام
<!-- ============================
قسم: الصفحة الرئيسية
تاريخ الإنشاء: 2025
========================== -->
<section>
<h2>أهلاً بك!</h2>
</section>
<!-- ============================
نهاية قسم الصفحة الرئيسية
========================== -->
التعليق مقابل المحتوى العادي — مقارنة
| الكود | يظهر في المتصفح؟ | يظهر في View Page Source؟ |
|---|---|---|
<p>مرحباً</p> |
✅ نعم | ✅ نعم |
<!-- ملاحظة --> |
❌ لا | ✅ نعم |
<!-- <p>معطّل</p> --> |
❌ لا | ✅ نعم |
أشياء مهمة تعرفها عن التعليقات
- لا يمكن كتابة تعليق داخل وسم آخر:
<p <!-- خطأ -->>لا يعمل. - التعليقات لا تتداخل مع بعضها — إذا فتحت
<!--أولى، فأول-->تجدها ستُغلق التعليق. - يمكن تعليق أي شيء: وسوم HTML كاملة، نصوص، أكواد CSS داخلية.
- حجم الملف يزيد قليلاً بوجود التعليقات، لكن هذا لا يؤثر على الأداء بشكل ملحوظ.
Ctrl + U في معظم المتصفحات).
مثال عملي — صفحة منظّمة بالتعليقات
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحتي المنظّمة</title>
<!-- ملف CSS الرئيسي -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- === الترويسة === -->
<h1>مرحباً في صفحتي</h1>
<!-- === المحتوى الرئيسي === -->
<p>هذا هو المحتوى الأساسي للصفحة.</p>
<!-- TODO: إضافة صورة هنا لاحقاً -->
<!-- === التذييل === -->
<p>حقوق النشر © 2025</p>
</body>
</html>
لاحظ استخدام TODO: داخل التعليق — هذه عادة شائعة جداً بين المبرمجين لتذكير أنفسهم بمهام لم تُنجز بعد.
الأسئلة الشائعة — FAQ
هل التعليقات تؤثر على سرعة الصفحة؟
تأثيرها ضئيل جداً — تضيف بايتات قليلة لحجم الملف. في المشاريع الإنتاجية، يُزال التعليق تلقائياً أحياناً بأدوات الضغط (Minifiers). للتعلم، لا تقلق بشأن هذا إطلاقاً.
هل التعليقات تؤثر على SEO والظهور في جوجل؟
لا تؤثر على ترتيبك في جوجل بأي شكل. جوجل يتجاهل التعليقات تماماً عند فهرسة الصفحة.
هل يمكن تعليق وسوم HTML كاملة بما فيها من خصائص؟
نعم، يمكنك وضع أي كود HTML داخل التعليق مهما كان طوله أو تعقيده، وسيتوقف عن العمل تماماً.
متى يجب أن أكتب تعليقاً؟
اكتب تعليقاً عند: بداية كل قسم رئيسي في الصفحة، عند وجود كود معقد لا يفهمه الآخرون بسرعة، عند تعطيل كود مؤقتاً، وعند ترك تذكيرات (TODO) لمهام مستقبلية.
<h1> إلى <h6> وكيف تختار المستوى الصحيح لكل عنوان.