Комментарии в HTML: примеры и особенности
HTML (HyperText Markup Language) — язык для гипертекстовой разметки документов для просмотра веб-страниц в браузере. HTML осваивают с азами программирования, и комментарии HTML — отдельная глава.
Редакция Highload разобралась, что такое комментарии в HTML, как правильно с ними работать, а также возможные ошибки, которые могут возникать.
Содержание
Что такое комментарии в HTML
Комментарии в HTML — это определенная конструкция в коде, которая помогает во время рефакторинга, но при этом не будет видна пользователю, который будет просматривать страницу в браузере.
Для чего они нужны
Это способ облегчить себе и своим коллегам работу в дальнейшем. Безусловно, каждый разработчик будет не раз возвращаться к ранее написанному коду. И определенные подсказки могут быть полезны при рефакторинге кода и удалении лишних строк.
Никаких ограничений в использовании комментариев нет. Единственное место на странице, где этого нельзя делать — тег <title>
— внутри этого тега комментарии не будут работать.
Чтобы закомментировать или раскомментировать код в HTML воспользуйтесь сочетанием клавиш ctrl + / или cmd + /.
Также нередко с кодом работают несколько разработчиков. Это может быть большой enterprise-проект или же легаси-код, с которым придется поработать не одному девелоперу. Комментарии коллег помогут в понимании логики работы продукта и ускорении разработки.
Комментарии также могут значительно сократить время, потраченное на исправление багов.
К тому же, наличие комментариев всегда улучшает читабельность кода.
Синтаксис
Что важно помнить, говоря о синтаксисе комментариев? Для написания комментария используется тег <!-- -->
.
Давайте рассмотрим пример комментария в коде:
<!DOCTYPE html> <html> <head> <!-- заголовок страницы --> <title>Комментарии в HTML документе</title> </head> <body> <!-- шапка сайта --> <div class="header">...</div> <!-- основная часть страницы --> <div class="content">...</div> <!-- левая колонка --> <div class="toolbar">...</div> <!-- подвал сайта --> <div class="footer">...</div> </body> </html>
Как мы уже говорили выше, комментарии не будут работать внутри тега <title>
, но это не единственное ограничение. История повторится и с тегом <style>
.
Особое внимание стоит уделить знаку восклицания. Когда мы применяем восклицательный знак после угловой скобки (<!)
, то сообщаем браузеру, что весь последующий текст уже не следует воспринимать как HTML-код. Действительно, тег выглядит непривычно и отличается от стандартных вариаций, поскольку содержит только одну угловую скобку (это справедливо как для открывающего, так и для закрывающего тега).
Давайте рассмотрим еще один пример:
<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы</title> </head> <body> <h1>Заголовок страницы</h1> <!-- <p>Эту часть кода мы хотим временно скрыть</p> --> <a href="https://ru.w3docs.com">домашняя страница</a> <!-- <p>Ссылка на домашнюю страницу сайта</p> --> </body> </html>
Отображение в браузере
С отображением комментариев в браузере все обстоит просто — они не отображаются 🙂 Это утверждение универсально для всех комментариев.
HTML-комментарий из одной строки
Комментарии бывают разные — они могут состоять из одной или нескольких строк. Предлагаем сначала рассмотреть комментарии, которые состоят из одной строки. В этом случае нам нужно разместить текст между последовательностью символов <!--
и -->
:
<!-- Это первый комментарий, он не будет виден на странице --> <h1>А это - заголовок. Он будет отображаться на странице.</h1> <!-- Это второй комментарий, его тоже не будет видно -->
Восклицательный знак в этом случае ставится в начале, в конце он уже не нужен.
Этот комментарий — самый простой пример использования комментариев в HTML-коде.
HTML-комментарий из нескольких строк
Более сложная вариация — это HTML-комментарий из нескольких строк.
Пример такого комментария:
<!-- Многострочный комментарий. В нем помещается много информации. Возможно вместить даже целую статью Или рассказ . -->
Или же:
<!-- <h1>Закомментированный заголовок</h1> <p>Этот абзац тоже не будет виден</p> -->
В случае с таким комментарием символы <!--
HTML-комментария из нескольких строк -->
указывают браузеру, что текст, расположенный между открывающим набором символов <!--
и закрывающим набором символов -->
— многострочный комментарий.
Условные комментарии
Условные комментарии HTML — это комментарии, которые дают возможность задавать блоки кода, которые будут выполняться исключительно в заданной версии браузера Internet Explorer. Во всех других версиях браузера Internet Explorer и в других браузерах их содержимое будет считаться обычным комментарием.
У условных комментариев есть свой синтаксис, который нужно задавать:
<!--[if Условие IE Версия]>Какой-то текст<![endif]-->
У нас есть несколько опций для выбора оператора:
gt
— больше чем;gte
— больше или равно;!
— не равно;lt
— меньше чем;lte
— меньше или равно;IE
— любая версия браузера Internet Explorer;IE 6
— Internet Explorer 6;IE 7
— Internet Explorer 7;IE 8
— Internet Explorer 8;IE 9
— Internet Explorer 9.
Параметр «Версия» необязателен, но в нем можно указать номер версии браузера Internet Explorer.
Давайте посмотрим на несколько примеров:
<!--[if IE]>Какой-то код<![endif]-->
— выполнять содержимое комментария, если браузер — любая версия Internet Explorer;
<!--[if gt IE 9]>Какой-то код<![endif]-->
— выполнять содержимое комментария, если браузер — Internet Explorer большей версии, чем указана.
Например:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Без комментариев</title> </head> <body> <p>Характеристикой быстроты служит физическая величина — скорость.</p> </body> </html> <!--[if lte IE 8]> ... <![endif]-->
Условный комментарий всегда начинается так:
<!--[if lte IE 8]> <p>... после которой идет HTML-код. Заканчивается (<strong>endif</strong>) условный комментарий строкой:</p> <![endif]-->
Возможные ошибки
Говоря о комментариях, невозможно не упомянуть возможные ошибки, с которыми могут столкнуться разработчики.
Для начала вспомним важные правила, которые существуют в комментировании:
- нельзя начинать комментарий со знака
>
; - аналогичный запрет действует и для знака
-
, мы не можем использовать его в начале; - после знака
-
не может следовать символ>
; - нельзя использовать последовательно символы дефис-минус
--
; - нельзя завершать комментарий символом дефис или минус
-
.
Есть еще одно важное замечание в теме про ошибки в работе с HTML-кодом — это использование лишних пробелов, а также иногда пропуск восклицательных знаков.
Пример таких ошибок можно увидеть ниже:
< !-- Неправильный комментарий #1 -->
<-- Неправильный комментарий #2 -->
Поскольку эти комментарии написаны неправильно, правила отображения на них не распространяются. Они будут отображаться в браузере.
Что еще мы можем отнести к ошибкам?
К примеру, незакрытый тег или отсутствие обязательного атрибута. Использование нерекомендованных символов в ссылках — также подводный камень, на который часто натыкаются начинающие разработчики.
Относительно значения атрибута id — оно не должно повторяться:
<!-- неправильно --> <div id="block"></div> <div id="block"></div> <!-- правильно --> <div id="block-1"></div> <div id="block-2"></div>
Примеры использования комментариев в HTML-коде
Предлагаем вам взглянуть на несколько примеров использования комментариев в HTML-коде.
В этом небольшом примере один комментарий:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Комментарий</title> </head> <body> <p>Я надел шапку-невидимку.</p> <!--Я стал невидимым--> </body> </html>
Здесб закомментированы разделы сайта «Меню» и «Содержимое документа»:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Комментарии</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <!-- Меню --> <div>Меню</div> <!-- Контент --> <div>Содержимое документа</div> </body> </html>
Вот хороший пример, в котором комментарий помогает понять, где начинается новый раздел:
<!DOCTYPE html> <html> <head> <title>Комментарии</title> <meta charset="utf-8"> </head> <body> <!-- Раздел --> <section class="b-lastAdded"> <h1 class="b-lastAdded__title">Последние добавленные фотографии</h1> <div class="b-lastAdded__item">...</div> </section> </body> </html>
Поддерживаемые браузеры
Сегодня, как ни странно, не все браузеры поддерживают HTML. Но Opera, Chrome, олдскульная Mozilla и Internet Explorer обеспечивают максимальную поддержку новых стандартов.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: