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

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

Так же комментарий в html коде, поможет другим программистам быстрее понять ваш код. Именно поэтому каждый, кто работает с html разметкой, должен знать как закомментировать код.

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

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

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

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

Поэтому, рекомендуется использовать комментирование больших участков кода, только во время тестирования и при отлавливании багов. Так как этот скрытый код увеличивает объем всего документа. А чем меньше объем, тем быстрее загрузка страницы. 

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

Конструкция тега комментария html очень проста и схематично выглядит так:

<!-- Текст комментария -->

  • <!-- это открывающий тег
  • Текст комментария - тут думаю понятно, что это сам комментарий.
  • --> закрывающий тег

Как видите, тут все довольно просто. Самое главное, следите за тем, чтобы в открывающем теге и закрывающем теге не было пробелов.

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

Пример однострочного комментария в разметке html

<!DOCTYPE html>
<html>
<head>
    <title>Демонстрационная страница HTML</title>
</head>
<body>

<!-- Мой однострочный комментарий: выводим заголовок -->
<h1>Заголовок H1</h1>
<p>Это параграф</p>

</body>
</html>

Очень важно запомнить: Комментарий в html не может быть вложенным в другой комментарий. Это нарушит разметку html документа. И в очень долго будете искать в чем причина.

Т.е вот так делать нельзя:

<!-- комментарий <!-- еще один комментарий внутри --> -->

Многострочный комментарий

Теперь рассмотрим вариант многострочного комментирования в html. Если посмотреть на однострочный комментарий, то он расположен в одну строку и имеет больше информативный характер.

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

Давайте перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
    <title>Демонстрационная страница HTML</title>
</head>
<body>

<!-- Тут мы закоменнтировали два элемента: Загловок и параграф
<h1>Заголовок H1</h1>
<p>Это параграф</p>
-->

</body>
</html>

Думаю ту все понятно и так. Мы в примере скрыли от глаз пользователя два элемента. Теперь они не будут отображаться на странице.

Нестандартный способ закомментировать участок кода html

Бывают случаи, когда вам необходимо закомментировать участок кода, который уже содержит в себе html комментарии. И для того, чтобы его скрыть на время отладки (к примеру), вам придется удалять уже существующие комментарии. Ведь мы уже знаем, что комментарии не могут быть вложенными.

Выход из этой ситуации есть, но он скорее лайфхак для временного использования, чем постоянный вариант. Так как является не совсем чистым и правильным.

Данный способ предлагает использовать комментирование из jsavascript. 

<!DOCTYPE html>
<html>
<head>
    <title>Демонстрационная страница HTML</title>
</head>
<body>
<script>
/*
<!-- Скрыли блоки
<h1>Заголовок H1</h1>
<p>Это параграф</p>
-->
<!-- Скрыли блоки еще
<h2>Заголовок H2</h2>
<p>Это параграф 2</p>
-->
*/
</script>

</body>
</html>

Мы тут использовали конструкцию комментария из js: /* комментарий */ где:

  1. /* - открытие комментария
  2. */ - закрытие комментария

Вот и все. И на последок: Старайтесь комментировать сложные участки кода, потом сами себе скажите спасибо.