Иногда в коде хочется оставить заметку для себя или коллеги, которую не увидят посетители сайта - для этого в HTML есть комментарии. А чтобы в разметке было легко ориентироваться, когда теги вкладываются друг в друга, важно делать отступы: чем глубже тег вложен, тем правее он начинается.
Попробуй убрать (<!--) и (-->) вокруг комментария - его текст появится на странице как обычный абзац. А если убрать отступы у (<p>), страница будет выглядеть точно так же - но читать такой текст станет заметно сложнее.
Как писать комментарии в HTML
Комментарий начинается с <!-- и заканчивается на -->. Всё что между ними, браузер полностью пропускает - этот текст не появляется на странице ни в каком виде а виден только тем, кто открывает исходный код.
<!-- Это комментарий, его не видно --> - текст спрятан от посетителя страницы.
Это комментарий, его не видно - без <!-- и --> это уже не комментарий а обычный текст и он появится на странице.
<!--[if IE]>...<![endif]--> - и выполнял код внутри него, пока остальные браузеры просто пропускали всё как обычный комментарий. Такие «условные комментарии» официально убрали в Internet Explorer 10 - и в обычном, и в режиме совместимости, - чтобы браузер лучше соответствовал HTML5.
Зачем нужны отступы у вложенных тегов
Отступы - это пробелы перед тегом, которые показывают уровень вложенности: чем глубже тег внутри других тегов, тем правее он начинается. На то, что покажет браузер, отступы никак не влияют - страница выглядит одинаково что с ними, что без них. Разница только для человека, который читает код.
<div>
<p>Первый абзац.</p>
</div><p> начинается правее <div> - сразу видно, что он вложен внутрь.
<div>
<p>Первый абзац.</p>
</div>Результат на странице будет ровно таким же, но в самом коде уже сложнее увидеть, что куда вложено.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Писать в комментарии то, что не должен увидеть посторонний | Комментарий не виден на странице, но остаётся в исходном коде - его легко найти через «Просмотреть код страницы» | Не писать в комментариях пароли, личные данные или служебные заметки не для чужих глаз |
Поставить только один дефис с каждой стороны: <!- текст -> |
Это не соответствует синтаксису комментария - результат в разных браузерах непредсказуем | Всегда использовать ровно два дефиса с каждой стороны: <!-- и --> |
| Не делать отступы вообще, весь код в одну колонку | Страница выглядит так же, но в самом коде почти невозможно понять, что куда вложено | Делать отступ на каждом уровне вложенности |
| Мешать табы и пробелы для отступов в одном файле | Отступы выглядят «вразнобой» в разных редакторах кода | Выбрать что-то одно - табы или пробелы - и использовать последовательно |
Шпаргалка
| Термин | Значение |
|---|---|
<!-- текст --> | Комментарий: виден в коде, но не на странице |
| Отступ | Пробелы перед тегом, показывающие уровень вложенности |
| Значение для браузера | Ноль - браузеру всё равно, есть отступы или нет |
| Значение для человека | Всё - без отступов сложный код почти невозможно читать |
Коротко: отвечаем на вопросы
Можно ли вложить один HTML-комментарий в другой?
Нет. Браузер закрывает комментарий на первом же встреченном «-->», поэтому вложенные комментарии не работают - конец внешнего комментария наступит раньше, чем задумано, и остаток кода может показаться на странице.
Табы или пробелы для отступов - что правильно?
Единого стандарта нет - для браузера разницы никакой. Если пишешь код один - используй что удобнее. Если работаешь в команде - придерживайся того, что уже принято в проекте, а не смешивай оба варианта.
Стоит ли перед публикацией сайта убирать комментарии и отступы ради скорости?
Такая обработка называется минификацией, и она реально уменьшает размер файла. Но это отдельный автоматический шаг перед публикацией - на этапе обучения и написания кода комментарии и отступы, наоборот, лучше оставлять для читаемости.
