Комментарий в HTML: как закомментировать строку и блок кода

Комментарий в HTML пишется так: <!-- текст -->. Всё, что стоит между <!-- и -->, браузер на страницу не выводит. Так же закомментировать можно строку, несколько строк или целый блок тегов, например кнопку, которую нужно временно убрать. В VS Code это делается сочетанием Ctrl + /, на Mac Cmd + /.

Комментарий скрыт только с экрана, в исходном коде страницы его прочитает любой посетитель. Ниже разберём синтаксис, горячие клавиши, комментарии в CSS и JavaScript и пять ошибок, после которых кусок кода вдруг появляется на сайте. Если разметку вы видите впервые, сначала прочитайте, что такое HTML и из чего состоит страница, а примеры пробуйте в своём файле index.html. Разобрать вёрстку по шагам с наставником можно на одном из курсов по HTML.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Комментарий открывается последовательностью <!-- (знак меньше, восклицательный знак и два дефиса) и закрывается -->. Пробелы вокруг текста не обязательны, но с ними код читается легче.

<!-- Шапка сайта -->
<header>
  <h1>Пекарня «Колосок»</h1>
</header>

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

<!--
  Блок отзывов отключён до 1 декабря.
  Вернуть после обновления дизайна.
-->

У синтаксиса есть ограничения. По спецификации HTML текст комментария:

• не начинается с > или ->;
• не содержит <!--, --> и --!>;
• не заканчивается на <!-.

Два дефиса подряд внутри текста в обычном HTML разрешены: <!-- раз -- два --> браузер разберёт как один комментарий. Валидатор W3C на такую запись выдаёт предупреждение: документ нельзя без потерь перевести в XML. А в SVG и MathML, которые живут по правилам XML, двойной дефис в комментарии запрещён, об этом предупреждает справочник MDN.

Как закомментировать строку или блок кода

Закомментировать код значит временно выключить его, не удаляя из файла. Так проверяют, какой блок ломает вёрстку, или прячут раздел, который ещё не готов.

1. Найдите в файле первую строку фрагмента, который нужно скрыть.
2. Поставьте перед ней <!--.
3. После последней строки фрагмента поставьте -->.
4. Сохраните файл и обновите страницу в браузере: блок исчезнет.
5. Чтобы вернуть фрагмент, удалите оба знака.

Пример: на странице две кнопки, а акция закончилась. Вторую кнопку убираем, первая остаётся.

<button type="button">Записаться</button>
<!--
<button type="button">Получить скидку 20 %</button>
-->

Внутри закомментированного блока могут стоять любые теги, атрибуты и текст. Нельзя только одно: другой комментарий. Почему, разберём в разделе об ошибках. Как устроены сами кнопки, мы писали в инструкции про тег button и кнопку-ссылку.

Горячие клавиши для комментариев

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

Сочетания в VS Code по справочнику клавиш редактора:

В HTML-файле разница между двумя командами видна сразу. Первая оборачивает в <!-- --> каждую выделенную строку целиком. Вторая ставит одну пару знаков вокруг выделения, даже если оно начинается с середины строки.

Комментарии в CSS и JavaScript

Внутри тегов <style> и <script> действуют правила CSS и JavaScript, а не HTML. Конструкция <!-- --> там не прячет код: браузер передаёт её дальше как текст стилей или скрипта.

Синтаксис CSS описан в справке MDN о комментариях в CSS, а синтаксис JavaScript разобран в статье о лексической грамматике. В CSS однострочного // нет, это частая ошибка у тех, кто пришёл из JavaScript.

<style>
  /* Цвет кнопки из брендбука */
  .button { background: #2b6cff; }
</style>

<script>
  // Счётчик кликов по кнопке
  let clicks = 0;
</script>

Где хранить стили и как их подключить, мы разобрали в отдельной инструкции: как подключить CSS к HTML.

Пять ошибок, из-за которых комментарий не работает

Каждый случай мы прогнали в Chrome 152 и посмотрели, что попало на страницу. Описания ошибок сверены с разделом спецификации об ошибках разбора.

Ошибка 1: комментарий внутри комментария

Вложить один комментарий в другой нельзя. Первый же --> закрывает внешний комментарий, а всё, что идёт после него, браузер считает обычной разметкой.

<!-- внешний <!-- внутренний --> хвост -->

На странице появится текст « хвост —>». Решение: перед тем как закомментировать большой блок, удалите или переделайте комментарии внутри него.

Ошибка 2: забыли закрыть комментарий

Если --> нет, комментарий тянется до конца файла. В нашей проверке после <!-- забыли закрыть со страницы пропало всё, что стояло ниже, включая следующие абзацы.

Решение: если половина страницы пропала без видимой причины, ищите в коде <!-- без пары. В VS Code закомментированный код подсвечивается другим цветом, и незакрытый блок выдаёт себя цветом до самого конца файла. После правки сохраните файл и откройте его в браузере заново, чтобы убедиться, что страница вернулась целиком.

Ошибка 3: комментарий внутри тега

Комментарий ставят только между тегами, а не внутри них. MDN прямо пишет, что его нельзя вставить в тег, например перед атрибутом.

<p <!-- служебная пометка --> class="note">Текст</p>

Chrome принял знаки комментария за атрибуты, и на странице появилось class="note">Текст. Решение: вынесите пометку на строку выше тега. Как правильно задать абзацу класс и стили, мы показывали в инструкции про тег p.

Ошибка 4: закрыли через —!>

Запись --!> вместо --> Chrome прощает и закрывает комментарий так же, как обычным знаком. Спецификация при этом называет такой случай ошибкой разбора, а валидатор W3C на наш пример замечаний не выдал. Решение: всё равно исправьте знак на -->, чтобы код не зависел от того, как его прочитает конкретная программа.

Ошибка 5: HTML-комментарий внутри script, style, title или textarea

Эти четыре элемента читают содержимое как сырой текст. В <textarea> и <title> знаки <!-- --> окажутся видны пользователю, в <style> и <script> станут частью стилей или кода. Решение: в стилях и скриптах пишите комментарии по правилам CSS и JavaScript из таблицы выше.

Кто видит комментарии и что в них нельзя писать

Комментарий не показывается на экране, но сервер отправляет его браузеру вместе со страницей. Чтобы в этом убедиться, допишите view-source: перед адресом любой страницы в Chrome. В инструментах разработчика комментарии тоже видны: браузер хранит их в DOM-дереве страницы отдельными узлами, у которых в JavaScript есть свой интерфейс Comment.

Поэтому в HTML-комментариях нельзя оставлять:

• пароли, ключи API, токены и адреса тестовых серверов;
• имена и телефоны клиентов, внутренние цены и скидки;
• пометки вроде «временный костыль, поправить после релиза», которые увидят конкуренты;
• старый код, который давно не нужен: он утяжеляет страницу и путает того, кто откроет файл после вас.

Если сайт собран на PHP, служебную пометку можно спрятать на стороне сервера. Комментарий PHP <?php /* ... */ ?> до браузера не доходит, его синтаксис описан в руководстве PHP. Мы прогнали пример в PHP 8.3:

<p>Цена</p><?php /* старая цена 990 */ ?><!-- новая цена с понедельника --><p>1290</p>

В ответе сервера осталось <p>Цена</p><!-- новая цена с понедельника --><p>1290</p>. HTML-комментарий ушёл посетителю, PHP-комментарий исчез.

В старых учебниках ещё встречаются условные комментарии вида <!--[if IE]>. Их понимал только Internet Explorer, и по документации Microsoft поддержку убрали ещё в IE 10. Сейчас любой браузер считает такую конструкцию обычным комментарием, в новых проектах она не нужна.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как писать полезные комментарии

Хороший комментарий объясняет то, чего не видно из самого кода. Подпись «это абзац» над тегом <p> ничего не добавляет. Пометка, почему блок стоит именно здесь и от чего он зависит, сэкономит время следующему верстальщику.

• Отмечайте конец больших блоков. Закрывающий </div> через двести строк от открывающего легко перепутать, поэтому в вёрстке часто пишут <!-- /.header --> рядом с ним.
• Пишите причину. Пометка «скрытый блок» ничего не объясняет, а «скрыт до запуска оплаты картой, вернуть после теста» сразу говорит, когда и зачем блок вернуть.
• Ставьте метки задач. Слова TODO и FIXME в начале комментария редакторы и плагины умеют находить по всему проекту.
• Удаляйте устаревшее. Комментарий, который противоречит коду, хуже, чем отсутствие комментария.

Комментарии тесно связаны со структурой страницы: чем понятнее разбиты блоки, тем меньше пояснений нужно. Как устроена разметка в целом, мы разобрали в обзоре основных тегов HTML и в статье о том, чем HTML5 отличается от HTML4.

Где освоить HTML системно

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML