HTML-комментарии
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Комментарий в HTML-коде задаётся так:
Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:
- Для комментирования кода. Всегда полезно оставить подсказку.
- Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.
Комментарии можно использовать в любом месте страницы, кроме тега — внутри него они не работают. Внутри тега HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в части «Знакомство с CSS».
Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш ctrl + / или cmd + / .
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 18 сентября по 20 ноября 2023. До 11 августа цена 20 900 ₽ 22 900 ₽
Бывает, что в HTML-коде есть сложные участки, назначение которых не совсем понятно.
—> В этом случае можно использовать комментарии, чтобы пояснить другому разработчику некоторые тонкости.
—>
Иногда какой-то код очень жалко или страшно удалять.
Поэтому его могут временно закомментировать.
!DOCTYPE>
Комментарии в HTML
Иногда нужно оставить скрытую заметку или пояснить что-то в коде человеческим языком. Такое примечание пригодится и себе в будущем, и следующим разработчикам, которые будут работать над вашим проектом. Именно для этого изначально были придуманы комментарии! Вся их прелесть в том, что пользователи их никогда не увидят. Это секретная почта для разработчиков 🤫
Для комментариев находится и более утилитарное применение: скрывать блоки кода со страницы, не удаляя их из файла.
Пример
Скопировать ссылку «Пример» Скопировано
Привет! Я комментарий в HTML-коде, меня не видно на странице-->
Я — обычный текст. Меня видно на странице!
p>Я — обычный текст. Меня видно на странице!p>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В HTML возможен только один тип комментариев, в отличие от комментариев в CSS и JS.
Комментарий всегда должен начинаться с конструкции . Тем самым мы чётко показываем браузеру границы спрятанного послания. Профит! Ваш комментарий готов.
При помощи ровно тех же конструкций мы можем временно спрятать блок кода.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Содержимое комментария может быть любым, но спецификация перечисляет конкретные ситуации, в которых браузеру будет сложно понять: это содержимое комментария, или он закрывается?
💡 Нельзя вкладывать один комментарий в другой. Да и зачем?
💡 Комментарии не работают внутри тега , но там вообще никакие теги не работают, так что неудивительно.
💡 Чтобы быстро закомментировать или раскомментировать текущую строку или выделенный блок кода, в большинстве редакторов можно нажать Ctrl / или Cmd / .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Комментарии часто используют, чтобы пометить начало какого-то крупного куска кода, пояснить его назначение. Комментарии, как правило, внешне отличаются от остального кода. Гораздо удобнее просканировать код, пробежаться глазами по комментариям и найти нужную часть, чем вчитываться в сам код.
Комментарий — твой хороший друг 🤝
🛠 Иногда для подключения чего-нибудь на страницу требуется скопировать-вставить блок кода, написанного не тобой. Чаще всего блок кода сопровождается комментариями. Всегда копируй весь код вместе с этими комментариями и вставляй его к себе в неизменном коде. Тебе же будет проще потом понять, что эта за странная конструкция и зачем она тут нужна.
Например, для подключения Яндекс.Метрики к сайту нужен такой код:
(function(m,e,t,r,i,k,a)
; 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> (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>
Видишь, он начинается с комментария и комментарием заканчивается? Это удобно, визуально отделяет код метрики от остального кода. В дальнейшем тебе проще будет его найти.
🛠 Читая чужой код, обращай внимание на комментарии. Там могут скрываться важные детали и подсказки, которые помогут тебе понять, как этот код работает и почему именно так.
🛠 Комментарии видны в браузере в инструментах разработчика, поэтому в них надо писать только документацию, которая поможет работе с кодом. Планы, впечатления и мнения стоит оставить в недоступном для конечных пользователей месте.
Комментарии в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
В любом программном коде часто возникает необходимость вставки комментариев. И хотя HTML — это не язык программирования, на нём всё равно пишется код. А это значит, что и в HTML иногда требуется оставлять комментарии, которые будут видны веб-мастеру при просмотре кода страницы, но не будут видны пользователю при просмотре страницы в браузере.
В этой статье и видео я расскажу о том, как вставлять комментарии в HTML-код.
Итак, комментарии в HTML помещаются между особыми элементами разметки — между . Например:
В некоторых источниках пишут, что после символов обязательно должны быть пробелы. Я советую соблюдать это правило, хотя почти все современные браузеры распознают комментарии и без выполнения этого условия.
Браузер Internet Explorer поддерживает ещё один вид комментариев. Текст, заключённый между тегами
Ну вот, в общем-то, и всё. Вопрос простой, но изучить его необходимо. Потому как при вёрстке сложных страниц без комментариев никак не обойтись.
Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
HTML Комментарии
HTML комментарии используются для написания пояснений, напоминаний или дополнительных описаний к отрезкам HTML кода. Они облегчают работу с кодом, позволяют быстро найти необходимые части, а также разобраться в намерениях программиста, который писал код (особенно важно, когда над созданием веб-сайта работают несколько человек).
Комментарии также можно использовать для временного исключения какого-либо блока, не удаляя его. Надо лишь поместить этот отрезок в тег , и браузер не будет его отображать. Сами комментарии в браузере не показываются, однако их можно увидеть, просмотрев исходный код веб-страницы.
Синтаксис
HTML комментарии помещаются между тегами .
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Заголовок страницы h1> Эту часть кода мы хотим временно скрыть --> a href="https://ru.w3docs.com">домашняя страница a> Ссылка на домашнюю страницу сайта --> body> html>
Результат
В браузере наши комментарии не видны.