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

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

Представьте, что вы открыли старый проект и видите непонятный блок кода. Комментарии — это заметки разработчика, которые:
- 📝 Поясняют сложные участки кода
- 🔍 Помогают ориентироваться в больших файлах
- 🛠 Позволяют временно отключать код без удаления
- 🤝 Делают ваш HTML понятным для других разработчиков

<!-- Главный контейнер страницы -->
<div class="container">
  <!-- Этот div будет скрыт до загрузки JS -->
  <div id="preloader" class="hidden"></div>
</div>

Синтаксис комментариев

Комментарии в HTML создаются с помощью специальной конструкции:


🔥 Важно:
- Все внутри  игнорируется браузером
- Может занимать несколько строк
- Не поддерживает вложенные комментарии (в отличие от CSS/JS)

<!-- Однострочный комментарий -->

<!-- 
  Многострочный комментарий.
  Идеально для пояснения сложных структур.
-->
<section>
  <!-- <p>Этот код временно отключен</p> -->
</section>

Где применять? Практические примеры

1. Разметка крупных блоков

Помечайте секции страницы для быстрой навигации:

<!-- ======= HEADER ======= -->
<header>...</header>

<!-- ======= MAIN CONTENT ======= -->
<main>
  <!-- Блок с акциями -->
  <section class="promo">...</section>
</main>

2. Временное отключение кода

Вместо удаления — закомментируйте проблемный участок:

<nav>
  <a href="/">Главная</a>
  <!-- <a href="/old-page">Устаревшая ссылка</a> -->
  <a href="/contacts">Контакты</a>
</nav>

3. Объяснение неочевидных решений

Почему здесь div, а не section? Комментарий даст ответ:

<!-- Используем div вместо section, 
     потому что валидатор W3C ругается на отсутствие заголовка -->
<div class="video-block">
  <iframe>...</iframe>
</div>

Лайфхаки от профессионалов 💡

🔸 Быстрое комментирование в VS Code

Выделите код и нажмите:
- Windows/Linux: Ctrl + /
- Mac: Cmd + /

🔸 "Закладки" для поиска

Используйте уникальные метки:

<!-- TODO: Добавить анимацию кнопки -->
<button class="submit-btn">Отправить</button>

<!-- FIXME: Исправить переполнение текста на мобильных -->
<div class="text-box">...</div>

Ошибки новичков 🚨

Вложенные комментарии не работают:

<!-- 
  Внешний комментарий
  <!-- Внутренний комментарий - так НЕЛЬЗЯ! -->
-->

Синтаксические конфликты:

<!-- Тег <strong> внутри комментария -->
<!-- А вот так — <!-- сломанный комментарий --> -->

Избыточные комментарии:

<!-- Здесь начинается header --> ❌ Избыточно
<header>  <!-- Логотип --> ❌ Очевидно
  <img src="logo.png" alt="Лого">
</header>

Инструменты для работы

Автогенерация комментариев в WebStorm/VSCode (шаблоны для <!--).
Поиск по TODO в современных редакторах.
HTML Minifiers — удаляют комментарии перед продакшеном.

Для углубленного изучения HTML рекомендуем YouTube-канал Данилы Бежина:
https://www.youtube.com/@DanilaBezhin

Практика: комментируем реальный код

Перед вами фрагмент без комментариев. Улучшите его:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog">Каталог</a></li>
    <li><a href="/cart">Корзина (<span class="cart-counter">0</span>)</a></li>
  </ul>
</nav>

✅ Решение:

<!-- Основная навигация сайта -->
<nav class="main-nav">
  <ul>
    <!-- Активная страница выделяется через JS -->
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog">Каталог</a></li>
    <!-- Счетчик обновляется AJAX-запросом -->
    <li><a href="/cart">Корзина (<span class="cart-counter">0</span>)</a></li>
  </ul>
</nav>