Комментарии в 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 обеспечивают максимальную поддержку новых стандартов.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: