Комментарии в HTML документе

HTML, как добавить комментарий

Чтобы добавить комментарий в HTML документ, используют специальный тег .

Комментарии — это текст, который будет виден твоим коллегам, но не будет виден пользователям, загрузившим веб-страницу.

Или ты просто хочешь оставить себе напоминание, о том, что должно быть сделано.

Причин для таких сообщений довольно много, но все эти сообщения объединяет то, что они не должны отображаться на странице, а видны только в редакторе кода, который ты используешь.

Для комментариев не нужны специальные теги, но их нужно как-то обозначить чтобы было понятно, где начало комментария и где его окончание.

HTML комментарий из одной строки

Простейший комментарий состоит из одной строки. Текст нужно разместить между последовательностью символов :

 h1>А это - заголовок. Он будет отображаться на странице.h1>

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

HTML комментарий из нескольких строк

Если тебе нужно добавить длинный комментарий, который состоит из нескольких строк, это тоже можно сделать в HTML.

 Многострочный комментарий. В нем поместится очень много информации. Может даже целая книга. --> 

Если внутри комментария будут расположены какие-то HTML теги, то их на странице видно не будет.

 
Закомментированный заголовок
 
Этот абзац тоже не будет виден
 --> 

Ошибки

Ошибки в HTML комментариях чаще всего связаны с лишним пробелом или пропущенным восклицательным знаком:

 !-- Неправильный комментарий #1 --> -- Неправильный комментарий #2 --> 

Оба комментария написаны неправильно и будут отображаться на HTML странице.

Источник

Комментарии в 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 Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example

This is another paragraph

—>

You can also hide more than one line. Everything between the will be hidden from the display.

Example

Hide a section of HTML code:

This is a paragraph.

Look at this cool image:

—>

This is a paragraph too.

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragraph:

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

Тег используется для написания комментария в коде HTML документа.

HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования HTML страницы в дальнейшем.

Комментарии в HTML не отображаются на странице в браузере пользователю, однако их можно увидеть в исходном коде веб-страницы (см. пример ниже).

Синтаксис

Отображение в браузере

На картинке ниже показано отображение HTML комментариев в коде страницы через браузер Google Chrome.

Пример использования комментариев в HTML коде

 
 
 
 
 
 
.
 
 
.
 
 
.
 
 
.
 

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Источник

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

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).

Количество просмотров этой статьи: 51 793.

Комментирование кода не только позволит вам самому понять, что же вы тут наворотили, но и другим существенно облегчит работу с вашим кодом. Кроме того, с помощью комментирования можно быстро отключать те части кода, которые вы еще не закончили, но уже добавили на страницу, что полезно при тестировании. Научитесь правильно комментировать, сделайте жизнь проще себе и окружающим!

Однострочный комментарий. Такие комментарии оформляются тегами . Такие комментарии можно быстро без особых сложностей, чтобы напоминать себе, что делает тот или иной фрагмент кода.

html> head> title>Заголовокtitle> head> body> p>Сайтp> body> html> 

Многострочный комментарий. Такие, как понятно из названия, захватывают уже несколько строк, что полезно для объяснения сложных участков или блокирования курпных частей кода.

html> head> title>Заголовокtitle> head> body>   Длинный комментарий. Все, что между тегами, будет обработано браузером как комментарий. --> p>Сайтp> body> html> 

Используйте комментарии для отключения фрагментов кода. Пытаясь поймать хитрый баг (ошибку), можно использовать комментарии для последовательного перебора кода. Так вам будет куда проще вернуть все обратно — для этого нужно будет лишь удалить код комментария.

html> head> title>Заголовокtitle> head> body> p>Проверка изображенийp> img src="/images/image1.jpg">   --> body> html> 

Используйте комментарии для предотвращения запуска скриптов в не поддерживающих их браузерах. Если вы пишете на JavaScript или VBScript, то можете с помощью комментариев прятать скрипты от браузеров, которые их все равно не поддерживают. Вставьте тег комментария в начало скрипта, закончите все//—>, чтобы скрипт все же запустился — но лишь в тех браузерах, которые смогут это сделать.

html> head> title>VBScripttitle> head> body> script language="vbscript" type="text/vbscript">  document.write("Hello World!") //--> script> body> html> 

Источник