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

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

На этой странице рассматриваются синтаксис комментариев, однострочные и многострочные комментарии, правила, делающие комментарий валидным (и ошибки, которые его нарушают), комментирование кода при отладке, а также устаревшие условные комментарии Internet Explorer, которые можно встретить в старых проектах.

Синтаксис

Комментарий открывается маркером <!-- и закрывается маркером -->. Всё, что находится между ними, игнорируется браузером:

<!-- This is an HTML comment -->

Комментарий можно разместить на отдельной строке или после разметки на той же строке:

<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->

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

Зачем использовать комментарии

• Объяснение намерения. Код показывает что происходит; комментарий фиксирует почему. На вопрос «Зачем этот <div> пустой?» отвечает однострочная заметка.
• Совместная работа. В общем коде комментарии сообщают коллегам, как должен работать тот или иной раздел.
• Заметки TODO / FIXME. Пометьте незавершённую работу или известные проблемы, чтобы их легко было найти позже (<!-- TODO: add alt text -->).
• Отладка. Временно скройте разметку, чтобы изолировать проблему, не теряя исходный код.

Однострочные и многострочные комментарии

Тот же синтаксис <!-- --> работает как для одной строки, так и для нескольких. Многострочный комментарий просто занимает несколько строк между открывающим и закрывающим маркерами:

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Everything here is ignored by the browser,
  no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>

В HTML нет отдельного синтаксиса блочных комментариев — в отличие от CSS, который использует /* ... */, или JavaScript, который использует // и /* ... */. В HTML всегда применяется <!-- -->.

Комментирование кода при отладке

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

<h1>The main heading</h1>

<!-- Temporarily disabled while debugging the layout
<aside>
  <p>This sidebar is hidden for now.</p>
</aside>
-->

<a href="https://www.w3docs.com">Homepage</a>

Элемент <aside> не отображается, и браузер даже не включает его в DOM. Когда отладка завершена, удалите <!-- и -->, чтобы вернуть код.

Валидные и невалидные комментарии

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

Нельзя вкладывать комментарии друг в друга. Первый --> закрывает комментарий, поэтому второй --> становится посторонним текстом на странице:

<!-- outer comment <!-- inner comment --> still inside? -->

Здесь комментарий заканчивается на первом -->. Оставшийся текст still inside? --> отображается как видимый — почти никогда не то, что нужно.

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

<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->

А вот проблемные:

<!-- Don't use a -- double dash inside -->   <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker     <-- the rest of the page may vanish

Самая надёжная привычка: открывайте с <!--, пишите заметку, используя одинарные дефисы или слова, и всегда закрывайте с -->.

Попробуйте: HTML-комментарии в полном документе

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <!-- <p>We want to hide this paragraph temporarily.</p> -->
    <a href="https://www.w3docs.com">Homepage</a>
    <!-- TODO: this link will point to the homepage -->
  </body>
</html>

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

Условные комментарии (устаревший Internet Explorer)

Старые версии Internet Explorer (IE 5 — IE 9) поддерживали специальный синтаксис условных комментариев. Для всех остальных браузеров они выглядели как обычные комментарии и игнорировались, но IE читал и выполнял разметку внутри при выполнении условия:

<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css">
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an old version of Internet Explorer.</p>
<![endif]-->

Это был стандартный способ подключить CSS или скрипты только для конкретных версий IE. Условные комментарии устарели. Internet Explorer 10 прекратил их поддержку, а современные браузеры никогда их не поддерживали, поэтому не используйте эту технику в новом коде. Она описана здесь лишь для того, чтобы вы могли опознать её в устаревших проектах.

Где можно и нельзя использовать комментарии

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

Практика