وثائق HTML قابلة للتشغيل: التعليقات في HTML

Q: كيف أكتب تعليقًا في HTML؟

ابدأه بـ : . يتجاهل المتصفح كل ما بين العلامتين، بما في ذلك الوسوم، لذلك تُستخدم الصيغة نفسها لتعطيل الشيفرة.

Q: ما اختصار التعليق في HTML؟

في VS Code ومعظم محررات الشيفرة، حدد الأسطر واضغط Ctrl + / (في Windows وLinux) أو Cmd + / (في Mac). يحيط المحرر التحديد بـ ، والمفاتيح نفسها تزيلهما.

Q: هل يمكن تداخل التعليقات في HTML؟

لا. أول --> ينهي التعليق، ففي c --> يُعرض النص c --> على الصفحة. لتعطيل كتلة تحتوي على تعليق، احذف التعليق الداخلي أو غيّره أولًا.

Q: هل تعمل تعليقات HTML داخل CSS أو JavaScript؟

لا. داخل عنصر استخدم / ... /، وداخل استخدم // أو / ... /. تعليق HTML داخل كتلة style لا يخفي قواعد CSS التي بداخله.

التعليقات في HTML: الصيغة والتعليق متعدد الأسطر والاختصار

التعليق في HTML نص بين  لا يعرضه المتصفح. تعلّم الصيغة، والتعليقات متعددة الأسطر، وتعطيل الشيفرة بالتعليق، واختصار المحرر، ولماذا لا يمكن تداخل التعليقات، ولماذا لا تكون خاصة أبدًا.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تكتب تعليقًا في HTML

يبدأ التعليق في HTML بـ . يتجاهل المتصفح كل ما بين العلامتين، فلا يظهر النص على الصفحة أبدًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

يظهر العنوان والفقرة فقط. في HTML صيغة تعليق واحدة، وتعمل لسطر واحد أو لعدة أسطر.

الاختصار في VS Code ومعظم المحررات: حدد بعض الأسطر واضغط Ctrl + / (أو Cmd + / في Mac). يضيف المحرر العلامات بدلًا منك، والمفاتيح نفسها تزيلها.

تعطيل الشيفرة بالتعليق

بما أن المتصفح يتجاهل الوسوم داخل التعليق، فإن إحاطة الشيفرة بـ  تخفيها من دون حذفها. هذه أسرع طريقة لاختبار الصفحة من دون عنصر ما:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

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

لا يمكن تداخل التعليقات

أول --> يغلق التعليق دائمًا. إذا كانت الشيفرة التي تعطّلها تحتوي أصلًا على تعليق، ينتهي التعليق الخارجي مبكرًا ويظهر الباقي على الصفحة. هذا المثال يمرر تعليقات متداخلة إلى محلل المتصفح ويعرض ما يبقى ظاهرًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

يُعرض still meant to be hidden --> كنص. قبل تعطيل كتلة كبيرة بالتعليق، احذف التعليقات التي بداخلها (أو غيّر --> الخاصة بها كي لا تُطابق).

قواعد أخرى: لا يمكن أن يبدأ التعليق بـ ، لذلك أبقِ الاثنين خارج نص التعليق.

التعليقات علنية

التعليقات جزء من HTML الذي يرسله الخادم، لذلك يستطيع كل زائر قراءتها عبر عرض المصدر أو أدوات المطور. ويمكن لسكربت أيضًا أن يسردها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

اجعل التعليقات مقتصرة على ملاحظات حول الشيفرة. أي شيء خاص (كلمات المرور، مفاتيح API، الروابط الداخلية، بيانات العملاء) يجب ألا يوجد في HTML أبدًا، سواء كان داخل تعليق أم لا. أدوات البناء والضغط تزيل التعليقات عادةً من HTML في بيئة الإنتاج، وهذا يوفر بعض البايتات أيضًا.

التعليقات في CSS وJavaScript

تعليقات HTML تعمل في HTML فقط. داخل <style> و<script> تستخدم صيغة التعليق الخاصة بتلك اللغة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

يتحول العنوان إلى الأزرق: CSS يتجاهل العلامتين  نفسيهما ويطبّق القاعدة التي بينهما. وحده /* ... */ يعطّل CSS. تشرح صفحة التعليقات في CSS تلك الصيغة.

التعليقات الشرطية

تحتوي الشيفرة القديمة أحيانًا على . كانت هذه تعليمات لـ Internet Explorer 9 وما قبله. كل المتصفحات الحالية تعاملها كتعليقات عادية، فيُتجاهل المحتوى الذي بداخلها ويمكن حذف الكتلة كلها.

أخطاء شائعة

تداخل التعليقات. --> الداخلي ينهي التعليق الخارجي. احذف التعليقات الداخلية قبل تعطيل كتلة بالتعليق.
وضع الأسرار في التعليقات. التعليقات تُرسل إلى كل زائر.
غياب -->. يختفي كل ما بعد <!-- حتى نهاية الملف، فيبدو كأن نصف الصفحة اختفى.
استخدام  في CSS. لا يعطّل القواعد. استخدم /* */.
استخدام // في HTML. يُعرض // note كنص. HTML لا يفهم إلا .

الأسئلة الشائعة

كيف أكتب تعليقًا في HTML؟

ابدأه بـ : . يتجاهل المتصفح كل ما بين العلامتين، بما في ذلك الوسوم، لذلك تُستخدم الصيغة نفسها لتعطيل الشيفرة.

كيف أكتب تعليقًا متعدد الأسطر في HTML؟

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

ما اختصار التعليق في HTML؟

في VS Code ومعظم محررات الشيفرة، حدد الأسطر واضغط Ctrl + / (في Windows وLinux) أو Cmd + / (في Mac). يحيط المحرر التحديد بـ ، والمفاتيح نفسها تزيلهما.

هل يمكن تداخل التعليقات في HTML؟

لا. أول --> ينهي التعليق، ففي  c --> يُعرض النص c --> على الصفحة. لتعطيل كتلة تحتوي على تعليق، احذف التعليق الداخلي أو غيّره أولًا.

هل يستطيع المستخدمون رؤية تعليقات HTML؟

لا تُعرض على الصفحة، لكنها تُرسل إلى المتصفح مع الصفحة. يستطيع أي شخص قراءتها عبر عرض المصدر أو أدوات المطور، لذلك لا تضع فيها كلمات مرور أو مفاتيح أو ملاحظات خاصة أبدًا.

هل تعمل تعليقات HTML داخل CSS أو JavaScript؟

لا. داخل عنصر <style> استخدم /* ... */، وداخل <script> استخدم // أو /* ... */. تعليق HTML داخل كتلة style لا يخفي قواعد CSS التي بداخله.

مفاهيم ذات صلة