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

Как оставить послание читателю вашего кода.

Время чтения: меньше 5 мин

Кратко

Скопировано

Иногда нужно оставить скрытую заметку или пояснить что-то в коде человеческим языком. Такое примечание пригодится и себе в будущем, и следующим разработчикам, которые будут работать над вашим проектом. Именно для этого изначально были придуманы комментарии! Вся их прелесть в том, что пользователи их никогда не увидят. Это секретная почта для разработчиков 🤫

Для комментариев находится и более утилитарное применение: скрывать блоки кода со страницы, не удаляя их из файла.

Пример

Скопировано

        
          
          <!--  Привет!  Я комментарий в HTML-коде, меня не видно на странице--><p>Я — обычный текст. Меня видно на странице!</p>
          <!--
  Привет!
  Я комментарий в HTML-коде, меня не видно на странице
-->

<p>Я — обычный текст. Меня видно на странице!</p>

Как пишется

Скопировано

В HTML возможен только один тип комментариев, в отличие от комментариев в CSS и JS.

Комментарий всегда должен начинаться с конструкции . Тем самым мы чётко показываем браузеру границы спрятанного послания. Профит! Ваш комментарий готов.

При помощи ровно тех же конструкций мы можем временно спрятать блок кода.

Подсказки

Скопировано

💡 Содержимое комментария может быть любым, но спецификация перечисляет конкретные ситуации, в которых браузеру будет сложно понять: это содержимое комментария, или он закрывается?

💡 Нельзя вкладывать один комментарий в другой. Да и зачем?

💡 Комментарии не работают внутри тега <title>, но там вообще никакие теги не работают, так что неудивительно.

💡 Чтобы быстро закомментировать или раскомментировать текущую строку или выделенный блок кода, в большинстве редакторов можно нажать Ctrl / или Cmd /.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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

Комментарий — твой хороший друг 🤝

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

Например, для подключения Яндекс.Метрики к сайту нужен такой код:

        
          
          <!-- Yandex.Metrika counter --><script>  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};  m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");  ym(id, "init", {    clickmap:true,    trackLinks:true,    accurateTrackBounce:true  });</script><noscript><div><img src="https://mc.yandex.ru/watch/id" style="position:absolute; left:-9999px;" alt=""></div></noscript><!-- /Yandex.Metrika counter -->
          <!-- Yandex.Metrika counter -->
<script>
  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
  m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

  ym(id, "init", {
    clickmap:true,
    trackLinks:true,
    accurateTrackBounce:true
  });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/id" style="position:absolute; left:-9999px;" alt=""></div></noscript>
<!-- /Yandex.Metrika counter -->

Видишь, он начинается с комментария и комментарием заканчивается? Это удобно, визуально отделяет код метрики от остального кода. В дальнейшем тебе проще будет его найти.

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

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

Кратко

Пример

Как пишется

Подсказки

На практике

Алёна Батицкая советует

Читайте также

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

Что такое технический долг

JSON