Как закомментировать код в html

Для комментирования кода в HTML используется конструкция <!-- Здесь комментарий -->. Этот тип комментариев работает как для одной строки так и для нескольких сразу

<!-- <h1>Этот заголовок пока не нужен</h1> -->
    <h1>А это правильный заголовок</h1>

    <!-- <ul> Пока не придумали списки меню
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul> -->

Для комментирования кода в HTML используется конструкция <!-- Здесь комментарий -->. Этот тип комментариев работает как для одной строки, так и для нескольких сразу. В примере выше многострочный комментарий <!-- ... --> скрывает целый блок кода со списком.

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

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

<!-- <p>Этот абзац не отобразится</p> -->
<p>А этот отобразится</p>

Быстрее всего — выделить код и нажать Ctrl + / (на macOS Cmd + /). VS Code, WebStorm и Sublime Text сами обернут строки в <!-- -->.

Несколько строк

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

<!--
<header>
  <nav>Меню</nav>
</header>
-->

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

Внутри тегов <style> и <script> действует синтаксис своего языка:

<style>
  /* комментарий в CSS */
  .title { color: red; }
</style>

<script>
  // однострочный комментарий в JavaScript
  /* многострочный
     комментарий */
</script>

Ctrl + / в VS Code сам подставляет нужный вид комментария.

Ограничения

• Комментарии нельзя вкладывать друг в друга. Первый же --> закроет комментарий, остаток кода покажется на странице.
• Внутри комментария нельзя писать --.
• Закомментированный код виден всем: он остаётся в исходном коде страницы, его можно увидеть через Ctrl + U или DevTools. Пароли, ключи и внутренние заметки в HTML-комментарии не оставляют.

Как скрыть элемент без комментария

Если элемент нужно временно спрятать, а код оставить рабочим:

<div hidden>Скрытый блок</div>

или через CSS:

.promo { display: none; }

Структуру HTML-документа разбирают на курсе «Профессиональная верстка».