HTML: комментарии

HTML-комментарий — это фрагмент разметки <!-- текст -->, который браузер игнорирует при рендеринге, но который виден в исходном коде страницы.

Зачем нужно

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

Где используется

  • Пометки «начало / конец» секций в длинных шаблонах
  • Временное отключение блоков HTML при отладке
  • Заметки о назначении нестандартного кода
  • TODO-метки в шаблонах при разработке
  • Условные комментарии (исторически — для IE, сейчас не актуальны)

Основной контент

Синтаксис

<!-- Это комментарий -->

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

<div>
  <!-- Комментарий внутри элемента -->
  <p>Видимый текст</p>
</div>

Временное отключение кода

<!-- Временно скрыт блок рекламы -->
<!--
<aside class="ad-banner">
  <img src="banner.jpg" alt="Реклама">
</aside>
-->

<main>
  <p>Основной контент.</p>
</main>

Разметка секций шаблона

<!-- ======== HEADER BEGIN ======== -->
<header>
  <nav>...</nav>
</header>
<!-- ======== HEADER END ======== -->

<!-- ======== MAIN CONTENT BEGIN ======== -->
<main>
  <article>...</article>
</main>
<!-- ======== MAIN CONTENT END ======== -->

Что нельзя делать в комментариях

<!-- Двойные дефисы внутри запрещены в старом HTML:
     <!-- вложенный комментарий --> — ошибка -->

<!-- Два дефиса подряд внутри тоже проблема:
     -- это может вызвать некорректный парсинг -->

По спецификации HTML5 строка -- внутри комментария допустима, но исторически вызывала проблемы. Избегайте.

Комментарии не скрывают данные

<!-- НЕ ДЕЛАЙТЕ ТАК: -->
<!-- API ключ: sk-abc123xyz -->
<!-- Пароль базы данных: secret123 -->

<!-- Комментарии видны в DevTools → Elements и в "Просмотр кода страницы" -->

Серверные комментарии vs. HTML-комментарии

<?php /* Этот комментарий НЕ отправляется клиенту */ ?>

<!-- Этот HTML-комментарий ОТПРАВЛЯЕТСЯ клиенту -->

Если нужен невидимый клиенту комментарий — используйте серверный язык шаблонов (PHP, Jinja2, Blade и т.д.).

Частые ошибки

  • Размещают чувствительные данные в комментариях — API-ключи, пароли, внутренние URL-адреса администрирования. Всё это видно в браузере.
  • Вложенные комментарии — <!-- <!-- --> --> — парсер HTML не поддерживает вложение, закроется на первом -->.
  • Закомментированный код остаётся в продакшн — увеличивает размер HTML. Удаляйте мёртвый код, используйте git для истории.
  • Комментарии в атрибутах — <div class="<!-- old-class -->"> — не работает; комментарии допустимы только между тегами.

Связанные темы

Ресурсы