Тег комментарий html – Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)

Leave a Comment / Html / By /

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+2.1+3.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег добавляет комментарий в код документа. Текст комментария не отображается на странице. Разрешается внутрь комментария добавлять другие теги, вложенные комментарии (когда один комментарий расположен внутри другого) недопустимы.

Синтаксис

<!-- текст -->

Атрибуты

Нет.

Пример 1. Использование комментариев

HTML 4.01IECrOpSaFx

<!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>

Пример 2. Использование комментариев

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
   <title>Комментарии</title>
   <meta charset="utf-8">
 </head>
 <body> 
   <!-- Раздел -->
   <section>
    <h2>Последние добавленные фотографии</h2>
    <div>...</div>
   </section>
 </body> 
</html>

Примечание

Двойной дефис внутри комментария (—) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа.

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

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

Описание

HTML тег <!-- --> используется для добавления комментариев в исходный код документа. Все содержимое, которое располагается между символами <!-- и -->, не отображается в окне браузера.

HTML комментарий может содержать внутри себя другие HTML теги, если на время надо прекратить их работу, кроме тега комментария. Вложенные комментарии (один комментарий в другом) не поддерживаются. Если, при отключении больших частей исходного кода, всё-таки один комментарий оказался внутри другого, то внешний комментарий будет закрыт символами --> внутреннего комментария. В этом случае всё, что располагается после этих символов, будет расценено браузером как обычная разметка документа и выведено на страницу.

Если комментарий расположен внутри тега <title>, он трактуется как текст и будет показан в заголовке страницы. Проще говоря, тег <!-- --> внутри тега <title>

не работает.

Примечание: html комментарии в коде являются многострочными, то есть если вы открыли комментарий с помощью символов <!-- и забыли его закрыть символами -->, то всё что находится после <!-- будет расцениваться браузером как комментарий.

Комментарии в основном используют, чтобы сопроводить код описанием, оставить какое-нибудь напоминание — это существенно помогает при просмотре и редактировании кода в будущем. Так же комментарии позволяют структурировать документ, добавляя описание к определенным блокам кода.

Атрибуты

нет

Пример


<!--Это комментарий. Комментарии не отображаются в окне браузера-->

<!--горизонтальная линия-->
<hr>

Результат данного примера в окне браузера:

как сделать комментарий в html

| HTML | WebReference

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

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
   <title>Комментарии</title>
   <meta charset="utf-8">
 </head>
 <body> 
   <!-- Раздел -->
   <section>
    <h2>Последние добавленные фотографии</h2>
    <div>...</div>
   </section>
 </body> 
</html>

Примечание

Комментарии запрещено вкладывать внутрь других комментариев.

Так делать нельзя

<!--
  Один комментарий
  <!-- Другой комментарий -->
-->

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

Когда вы создаете большие сайты, то со временем можете забыть, что именно делает та или иная часть кода страницы. И сколь хорошо бы вы ни знали код страницы на момент его написания, если вам придется вернуться к нему спустя какое-то время (или кому-либо еще понадобится просмотреть его), то именно комментарии помогут быстро разобраться с кодом. Комментарии могут располагаться в любом месте страницы, потому что не отображаются браузером. Информация в комментариях не имеет специального значения и не воспринимается как НТМL-код. Комментарии используются чаще для пояснений, например коrдa над кодом работают несколько человек или когдa необходимо временно исключить некий фрагмент кода из обработки, не удаляя ero совсем, то можно заключить такой фрагмент в комментарий, после чего он будет проигнорирован браузером.

Комментарии в HTML имеют следующий синтаксис:

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

Восклицательный знак после утловой скобки означает, что это уже не НТМL-код. Текст, заключенный между тегами <!— и —> , не отображается веб-браузером. Заметьте, что это нестандартная пара тегов, так как открывающий тег не имеет закрывающей угловой скобки, а в закрывающем теге отсутствует открывающая угловая скобка.

Комментариями можно пользоваться для того, чтобы отметить ключевые моменты в НТМL-коде, и в дальнейшем легче было в нем ориентироваться и вам, и тем, кто после вас будет редактировать код. Кроме того, можно комментировать части HTML-кода для предотвращения их отображения. В следующем примере вы увидите закомментированную гиперссылку:

Пример HTML:

Попробуй сам
<!-- Начало введения -->
    <h2>Базовый HTML</h2>
    <h3>Основные понятия</h3>
<!-- Окончание введения -->
<!-- Начало основного текста -->
   <p>HTML расшифровывается как Hyper Text Markup Language...</p>
<!-- Окончание основного текста -->
<!-- <а href="mailto : iп[email protected]">Cвязaтьcя</a> -->

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

Условные комментарии

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

Условные комментарии в HTML имеют следующий синтаксис:

<!--[if Условие IE Версия]>Какой-то текст<![endif]-->

Как не трудно заметить, все содержимое тега расположено внутри обычного HTML-комментария. В необязательном параметре «Условие» могут быть указаны следующие операторы:

  • lt — меньше чем;
  • lte — меньше или равно;
  • gt — больше чем;
  • gte — больше или равно;
  • ! — не равно.

В необязательном параметре «Версия» указывается номер версии браузера Internet Explorer.

Приведем несколько примеров:

<!--[if IE]>Какой-то код<![endif]--> — выполнять содержимое комментария,
 если браузером является любая версия Internet Explorer;
<!--[if IE 9]>Какой-то код<![endif]--> ‰ — выполнять содержимое комментария,
если браузером является версия Internet Explorer 9;
<!--[if lt IE 8]>Какой-то код<![endif]-->‰ — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer меньшей версии, чем 8;
<!--[if lte IE 8]>Какой-то код<![endif]-->‰ — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer версии, меньшей или равной указанной;
<!--[if gt IE 9]>Какой-то код<![endif]-->‰ — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer большей версии, чем указана;
<!--[if gte IE 7]>Какой-то код<![endif]-->‰ — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer версии, большей или равной указанной.

Задачи

Итоговое задание [19-20]

На этом уроке вы познакомились с комментариями. Применение комментариев при изучении HTML поможет вам разобраться где начинается или заканчивается тот или иной раздел документа, а также правильно интерпретировать код страницы. Это особенно важно для начинающих Web-дизайнеров.

Пришло время повторить изученное и выполнить два несложных задания:

Комментарий

Используя тег комментария сделайте так, чтобы предложение: «Я стал невидимым» осталось в HTML-коде, но не отображалось браузером.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Комментарий</title>  
 </head>
 <body>
  <p>Я одел шапку-невидимку.</p>
  Я стал невидимым
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 <title>Комментарий</title>  
 </head>
 <body>
  <p>Я одел шапку-невидимку.</p>
  <!--Я стал невидимым-->
 </body>
</html>

Без комментариев

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Без комментариев</title>  
 </head>
 <body>
  <!--<p>Характеристикой быстроты служит физическая величина — скорость.</p>-->
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Без комментариев</title>  
 </head>
 <body>
  <p>Характеристикой быстроты служит физическая величина — скорость.</p>
 </body>
</html>


Please enable JavaScript to view the comments powered by Disqus.

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

remove_html_comments

Когда вы будете писать html-код, может понадобиться:

1) Сделать пометки в коде, по которым можно позже вспомнить, зачем нужен тот или иной фрагмент кода.

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

Либо, вам нужно сделать пометку, для чего нужен тот или иной тэг.

И.т.д. ситуаций может быть масса.

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

2) Вам может также понадобиться оставить информацию в коде о том, кто является создателем этой страницы, когда она создана и.т.д.

Все эти задачи можно решить с помощью комментариев HTML.

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

Синтаксис у комментариев в html следующий:

<!-- Текст комментария -->

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

Рассмотрим HTML-документ со следующим содержимым:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--Пример комментария HTML. Этот текст будет невидим в браузере.-->
<p>Пример текста в абзаце</p>
</body>
</html>

Если вы будете просматривать такой HTML-файл в браузере, то все, что вы увидите, будет текст, который находится внутри абзаца.

03-10-2013 12-10-32

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

html комментарии в коде | Programmirovanie-dla-sсhool

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

Чтобы быть менее загадочным, мы определяем наиболее распространенные функции, выполняемые комментариями HTML:

  • Написать общие аннотации к разметке;
  • Деактивировать части кода на этапе отладки или тестирования;
  • Сообщите о закрытии блоков кода, чтобы избежать путаницы;

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

Давайте сразу перейдем к практике. Чтобы добавить комментарий, синтаксис довольно прост, заключите текст между <!--и -->:

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

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

<p>Этот текст виден в браузере</p>
<!--
<p>Это коментарий и его не видно в браузере</p>
-->

Отметить закрытие тегов: div и не только

Среди наиболее часто используемых методов — использование комментариев для обозначения конца блока : часто они являются блочными элементами, такими как те, <div>которые определяют структуру (макет) страницы.

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

<div>
	<article>
	   ...
	   контент
	</article>
	<div>
		<ul>
		   <li>... </li>
		   <li>контентт</li>
		</ul>
	</div><!--/.mybox-->
</div><!--/#main-->

Условные комментарии html

Мы добавим эту часть для полноты. В прошлом Internet Explorer не всегда соответствовал стандартам HTML и CSS, этот недостаток дорого обходился браузеру Microsoft и заработал ему репутацию самого ненавистного браузера, особенно в кругах разработчиков, которым приходилось находить ряд приемов, чтобы избежать ошибок, представленными в разных версиях.

Условных комментариях в основном , полезны для для адаптации сайтов к капризам Internet Explorer, потому что они позволяют распознать версию IE (например, 6 — я, 7 — й и 8 — й) , и вы можете добавить соответствующий код, как правило , библиотеки Полифиллер CSS или JavaScript.

Это в конечном итоге комментарии с определенным синтаксисом:

<!--[if IE 7]>
<link rel="stylesheet" type="text/CSS" href="stile-per-IE7.css">
<![endif]-->

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.1+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey
Активация ссылки с помощью комбинации клавиш.
coords
Устанавливает координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задает адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задает форму активной области ссылки для изображений.
tabindex
Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.
type
Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *