Исполняемые доки HTML: Комментарии HTML

Q: Как написать комментарий в HTML?

Начните его с : . Браузер игнорирует все между этими маркерами, включая теги, поэтому тем же синтаксисом можно закомментировать код.

Q: Можно ли вкладывать комментарии HTML?

Нет. Первый --> завершает комментарий, поэтому в c --> текст c --> появится на странице. Чтобы закомментировать блок, в котором уже есть комментарий, сначала удалите или измените внутренний.

Q: Работают ли комментарии HTML внутри CSS или JavaScript?

Нет. Внутри элемента используйте / ... /, а внутри используйте // или / ... /. Комментарий HTML в блоке стилей не скрывает правила CSS внутри него.

Комментарии в HTML: синтаксис, многострочные и Ctrl+/

Комментарий 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 в блоке стилей не скрывает правила CSS внутри него.

Связанные концепции