Комментарии в HTML: как правильно закомментировать код

Комментарий в HTML — это текст внутри кода страницы, он не отображается на экране и не выполняется браузером. Разработчики добавляют комментарии в разметку, чтобы оставлять пояснения к структуре, временно отключать блоки кода или делать заметки для других участников команды.

👉 В статье разберём синтаксис HTML-комментариев, покажем готовые примеры для разных ситуаций и ответим на вопросы о видимости комментариев для пользователей и поисковых систем.

Что такое комментарии в HTML

Комментарий в HTML — это фрагмент текста в исходном коде, который браузер игнорирует при отрисовке страницы. Разработчики используют комментарии, чтобы описывать структуру HTML-разметки, оставлять заметки для коллег и временно отключать блоки кода. Комментарий не влияет на внешний вид страницы и не выполняется как код.

Пользователь не увидит текст комментария в интерфейсе сайта, однако может посмотреть его через инструменты разработчика. Поисковые роботы тоже читают исходный код и технически видят комментарии. Поисковики не используют технические заметки для ранжирования, поэтому комментарии не влияют на SEO.

Синтаксис комментария в HTML

Комментарий в HTML открывается символами <!– и закрывается символами –>. Весь текст между этими маркерами браузер пропускает.

Однострочный комментарий записывается в одну строку:

<!-- Это однострочный комментарий -->

HTML не разделяет однострочные и многострочные комментарии на уровне синтаксиса. Открывающий и закрывающий маркеры остаются теми же, а текст внутри занимает столько строк, сколько нужно:

<!--
  Первая строка
  Вторая строка
  Третья строка
-->

Ограничения синтаксиса

Внутри комментария нельзя использовать двойное тире без закрывающего маркера. Последовательность — браузер воспринимает как признак завершения комментария, что нарушает разметку:

<!-- Неверно -- это сломает комментарий -->

Вложенные комментарии в HTML не работают. Если открыть комментарий внутри другого комментария, браузер закроет внешний комментарий на первом встречном –> и воспримет оставшийся текст как обычную разметку:

<!-- Внешний комментарий <!-- Вложенный --> сломан -->

Как закомментировать код в HTML: примеры

Оберните нужный текст или тег в маркеры комментария:

<!-- Заголовок главной страницы -->
<h1>Добро пожаловать</h1>

Чтобы закомментировать блок кода, открывающий маркер поставьте перед первым элементом, закрывающий — после последнего. Можно вставлять маркеры вручную или нажать комбинацию клавиш Ctrl + /. Если вы только начинаете, сначала разберитесь, как создать HTML-файл и открыть его в браузере.

<!--
<section>
  <h2>Акции</h2>
  <p>Текст раздела</p>
</section>
-->

Комментарий убирает элемент из отрисовки без удаления кода. Когда элемент снова понадобится, достаточно убрать маркеры:

<!-- Кнопка скрыта до окончания акции -->
<!-- <button>Купить со скидкой</button> -->

Комментарии в HTML и SEO

Поисковые роботы читают исходный код страницы целиком, включая содержимое комментариев. Текст внутри не участвует в ранжировании. Поисковые системы не извлекают из комментариев ключевые слова, не учитывают их для оценки релевантности страницы.

Текстовые заметки увеличивают размер HTML-файла, однако на практике их объём незначителен. Десятки строк комментариев добавляют к весу страницы единицы килобайт, что не сказывается на показателях Core Web Vitals.

Если размер файла критичен, комментарии удаляются на этапе сборки в Webpack или Vite. Минификаторы убирают все заметки, поэтому в финальном коде комментариев не остаётся.

Комментарии в HTML и безопасность

Исходный код HTML-страницы открыт для любого пользователя через браузер. Комментарии находятся в том же исходном коде, поэтому их содержимое доступно всем.

⚠️ В комментариях не размещают данные, которые не предназначены для публичного доступа. К таким данным относятся:

Служебные пометки, которые не должны попасть в продакшн, удобнее хранить в системе контроля версий. Например, в описаниях коммитов.

Сравнение комментариев в HTML, CSS и JavaScript

Комментарий, записанный по правилам HTML, не сработает внутри блока CSS или JavaScript.

HTML

<!-- Навигационное меню сайта -->
<nav>...</nav>

CSS

/* Стили для навигационного меню */
nav { display: flex; }

JavaScript

// Однострочный комментарий к функции
function init() {}
/* Многострочный комментарий:
   описание логики блока */
function calculate() {}

Отличия на практике

Внутри HTML-файла часто встречаются блоки <style> и <script>. Их содержимое браузер обрабатывает как CSS и JavaScript соответственно, поэтому внутри действуют правила комментирования именно этих языков.

<style>
  /* Комментарий внутри тега style — это CSS-синтаксис */
  body { margin: 0; }
</style>
<script>
  // Комментарий внутри тега script — это JS-синтаксис
  console.log('ready');
</script>

Типичные ошибки при комментировании HTML

Как правильно просить ИИ объяснять и комментировать код

ChatGPT и Claude умеют добавлять HTML-комментарии к коду по запросу. Качество результата зависит от того, насколько точно сформулирована задача.

Передайте код и укажите, для кого нужны пояснения. Уровень детализации комментариев зависит от контекста, который вы задаёте:

• Добавь HTML-комментарии к этому коду. Я начинающий разработчик, объясняй каждый блок простыми словами.

Если непонятен отдельный элемент, укажите его явно, а не отправляйте весь файл:

• Объясни, что делает этот тег и какие атрибуты в нём обязательны. Вставь объяснение в виде комментария над строкой.

При генерации нового кода укажите требование к комментариям в самом запросе:

• Напиши HTML-разметку карточки товара и добавь комментарий над каждым смысловым блоком.

Результат становится точнее, если запрос содержит уровень подготовки, язык комментариев и степень детализации. Запрос вида «добавь комментарии» даёт менее предсказуемый результат, чем запрос «добавь краткий комментарий для junior-разработчика на русском языке над каждым блоком».

Что дальше

Откройте исходный код этого сайта через DevTools и найдите комментарий <!– Yandex.Metrika counter –> в теге <head>. Так выглядит HTML в реальных проектах, и читать чужой код полезнее, чем разбирать учебные примеры. Если разметка кажется хаотичным набором английских слов, переходите к статье по вёрстке с основами HTML.

Советуем дополнительно почитать по теме: