Учебники

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

Декабрь 15, 2018

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

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

пример

Live Demo

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Это приведет к следующему результату без отображения содержимого, указанного в комментариях:

Действительный против Неверных комментариев

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

пример

Здесь данный комментарий является действительным комментарием и будет удален браузером.

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Это даст следующий результат —

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

Live Demo 

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Это даст следующий результат —

Многострочные комментарии

До сих пор мы видели однострочные комментарии, но HTML также поддерживает многострочные комментарии.

Вы можете прокомментировать несколько строк специальным начальным тегом <! — и конечным тегом ->, расположенным перед первой строкой и концом последней строки, как показано в приведенном ниже примере.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

Это даст следующий результат —

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

Условные комментарии работают только в Internet Explorer (IE) в Windows, но они игнорируются другими браузерами. Они поддерживаются начиная с Explorer 5 и далее, и вы можете использовать их, чтобы давать условные инструкции различным версиям IE.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

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

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

Есть несколько браузеров, которые поддерживают тег <comment> для комментирования части HTML-кода.

Примечание. Тег <comment> устарел в HTML5. Не используйте этот элемент.

Примечание. Тег <comment> устарел в HTML5. Не используйте этот элемент.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

Если вы используете IE, то он даст следующий результат —

Но если вы не используете IE, то он даст следующий результат —

Код сценария комментирования

Хотя вы изучите JavaScript с HTML в отдельном руководстве, но здесь вы должны отметить, что если вы используете Java Script или VB Script в своем HTML-коде, то рекомендуется поместить этот код сценария в надлежащие комментарии HTML, чтобы старые браузеры могут работать правильно.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

Это даст следующий результат —

Комментируя таблицы стилей

Хотя вы научитесь использовать таблицы стилей с HTML в отдельном учебнике, но здесь вы должны отметить, что если вы используете Каскадную таблицу стилей (CSS) в своем HTML-коде, то рекомендуется поместить этот код таблицы стилей в надлежащие комментарии HTML. так что старые браузеры могут работать правильно.

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

Это даст следующий результат —

52
Share: