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

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

Комментарии HTML не отображаются в браузере, но помогают документировать исходный код HTML заметками и напоминаниями.

Тег комментария HTML

Комментарий добавляется с помощью такого синтаксиса: . Обратите внимание, что восклицательный знак (!) стоит в открывающем теге, но не в закрывающем.

Примечание: Комментарии не отображаются браузером, но помогают документировать ваш код.

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

Форма комментария HTML.

<!-- Write your comments here -->

Добавление комментариев

Вы можете размещать заметки и напоминания в своём коде с помощью комментариев.

Пример

Комментарии, используемые как заметки вокруг абзаца.

Страница, использующая HTML-комментарии в качестве заметок и напоминаний вокруг абзаца, показывающая, что комментарии не отображаются в браузере.

> Output: полная HTML-страница

Prompt

Страница, использующая HTML-комментарии в качестве заметок и напоминаний вокруг абзаца, показывающая, что комментарии не отображаются в браузере.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добавление комментариев</title>
</head>
<body>

<!-- Это комментарий -->

<p>Это абзац.</p>

<!-- Не забудь добавить здесь больше информации -->

</body>
</html>

Скрытие содержимого

Комментарии могут скрывать содержимое, что удобно, когда нужно временно что-то убрать. Всё, что находится между , скрыто от глаз — будь то одна строка или много.

Комментарии также отлично подходят для отладки: можно закомментировать строки по одной, чтобы найти ошибки.

Скрыть один абзац

Один абзац, закомментированный так, чтобы он не отображался.

Страница с тремя короткими абзацами, где средний абзац закомментирован, поэтому отображаются только два.

> Output: полная HTML-страница

Prompt

Страница с тремя короткими абзацами, где средний абзац закомментирован, поэтому отображаются только два.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скрытие содержимого</title>
</head>
<body>

<p>Это абзац.</p>

<!-- <p>Это ещё один абзац </p> -->

<p>Это тоже абзац.</p>

</body>
</html>

Скрыть раздел

Целый блок HTML, скрытый внутри многострочного комментария.

Страница, в которой целый блок HTML (заголовок и изображение) скрыт внутри многострочного комментария между двумя видимыми абзацами.

> Результат: полная HTML-страница

Prompt

Страница, в которой целый блок HTML (заголовок и изображение) скрыт внутри многострочного комментария между двумя видимыми абзацами.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скрытие раздела</title>
</head>
<body>

<p>Это абзац.</p>
<!--
<p>Посмотри на эту классную картинку:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>Это тоже абзац.</p>

</body>
</html>

Скрытие содержимого внутри строки

Комментарии также могут скрывать часть внутри строки HTML.

Пример

Комментарий, скрывающий часть текста абзаца.

Страница с одним абзацем, у которого в середине текста есть комментарий, скрывающий часть внутри строки: «Это абзац.» со скрытым комментарием между This и is.

> Результат: полная HTML-страница

Prompt

Страница с одним абзацем, у которого в середине текста есть комментарий, скрывающий часть внутри строки: «Это абзац.» со скрытым комментарием между This и is.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скрытие внутри строки</title>
</head>
<body>

<p>Это <!-- отличный текст --> абзац.</p>

</body>
</html>