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

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

Сейчас вы ещё почти не написали код — но комментарии понадобятся сразу, как только код станет длиннее. Лучше привыкнуть к ним с самого начала.

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

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

Зачем нужны комментарии:

• Объяснение сложного кода — для себя и других разработчиков
• Описание структуры — разделы страницы
• Временное отключение элемента — без удаления кода
• TODO — заметки о том, что нужно доделать

Важно: комментарии видны в исходном коде страницы (Ctrl+U). Не пишите в них пароли, ключи API или конфиденциальную информацию.

Комментарии не вкладываются друг в друга: <!-- <!-- вложенный --> --> — так НЕЛЬЗЯ

Комментарий — как стикер-заметка на чертеже. Архитектор пишет «здесь будет кухня» — это не стена, но помогает понять план. Комментарий в HTML — такая же заметка: полезна для разработчика, невидима для посетителя.

**Самый простой:**

<!-- Это комментарий: браузер его не покажет -->
<p>Этот параграф виден.</p>
<!-- <p>Этот параграф скрыт.</p> -->

Комментарий не отображается. Можно временно скрыть элемент, закомментировав его.

**Простой:**

<!-- Шапка сайта -->
<header>
  <h1>Мой сайт</h1>
</header>

<!-- Основной контент -->
<main>
  <p>Привет!</p>
</main>

<!-- Футер -->
<footer>
  <p>© 2025</p>
</footer>

Комментарии помогают структурировать код и быстро ориентироваться в больших файлах.

**Реальный пример:**

<!-- TODO: добавить форму обратной связи -->
<!--
<section id="contact">
  <h2>Контакты</h2>
  <form>
    <input type="email" placeholder="Email">
    <button>Отправить</button>
  </form>
</section>
-->

<!-- Временно скрыто до завершения верстки -->
<main>
  <p>Контент страницы</p>
</main>

Комментарии как инструмент: TODO для планов, блок кода для временного отключения.

**Неправильно:** Писать пароли или ключи в комментариях

**Почему:** Комментарии видны в исходном коде страницы (Ctrl+U). Любой может их прочитать.

**Правильно:** Никогда не храните секреты в комментариях HTML.

**Неправильно:** Вкладывать комментарии друг в друга

**Почему:** HTML не поддерживает вложенные комментарии. <!-- <!-- x --> --> сломает структуру.

**Правильно:** Один комментарий — один блок. Не вкладывайте комментарии.

**Неправильно:** Комментировать слишком много

**Почему:** Избыточные комментарии засоряют код и мешают чтению. Комментарий должен объяснять «зачем», а не «что».

**Правильно:** Комментируйте только неочевидные решения. Сам код должен быть читаем сам по себе.

• Синтаксис: <!-- текст -->
• Комментарии не отображаются на странице
• Видны в исходном коде (Ctrl+U)
• Не вкладывайте комментарии друг в друга
• Не храните секреты в комментариях

Назад: Вы знаете структуру HTML (H2) — комментарии помогают пояснять её.

Вперёд: В следующем уроке (H4) вы изучите базовые теги HTML: div, span, br, hr и другие важные элементы.