HTML - komentarze

Komentarz to fragment kodu, który jest ignorowany przez każdą przeglądarkę internetową. Dobrą praktyką jest dodawanie komentarzy do kodu HTML, zwłaszcza w złożonych dokumentach, w celu wskazania sekcji dokumentu i wszelkich innych uwag każdemu, kto ogląda kod. Komentarze pomagają Tobie i innym zrozumieć Twój kod i zwiększają jego czytelność.

Komentarze HTML są umieszczane pomiędzy tagi. Tak więc każda treść umieszczona w tagach <! - ... -> będzie traktowana jako komentarz i zostanie całkowicie zignorowana przez przeglądarkę.

Przykład

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

Daje to następujący wynik bez wyświetlania treści podanej jako część komentarzy -

Komentarze prawidłowe i nieprawidłowe

Komentarze nie zagnieżdżają się, co oznacza, że nie można ich umieścić w innym komentarzu. Po drugie, podwójny myślnik „-” nie może pojawić się wewnątrz komentarza, z wyjątkiem jako część zamykającego tagu ->. Musisz również upewnić się, że w ciągu komentarza na początku komentarza nie ma spacji.

Przykład

W tym przypadku podany komentarz jest ważnym komentarzem i zostanie usunięty przez przeglądarkę.

<!DOCTYPE html>
<html>

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

To da następujący wynik -

Jednak następujący wiersz nie jest prawidłowym komentarzem i zostanie wyświetlony przez przeglądarkę. Dzieje się tak, ponieważ między lewym nawiasem trójkątnym a wykrzyknikiem znajduje się spacja.

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

To da następujący wynik -

Komentarze wielowierszowe

Do tej pory widzieliśmy komentarze jednowierszowe, ale HTML obsługuje również komentarze wieloliniowe.

Możesz skomentować wiele wierszy za pomocą specjalnego znacznika początkowego <! - i końcowego znacznika -> umieszczonego przed pierwszą linią i końcem ostatniej linii, jak pokazano w podanym przykładzie poniżej.

Przykład

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

To da następujący wynik -

Komentarze warunkowe

Komentarze warunkowe działają tylko w przeglądarce Internet Explorer (IE) w systemie Windows, ale są ignorowane przez inne przeglądarki. Są one obsługiwane od wersji Explorer 5 i można ich używać do wydawania instrukcji warunkowych dla różnych wersji IE.

Przykład

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

Spotkasz się z sytuacją, w której będziesz musiał zastosować inny arkusz stylów oparty na różnych wersjach przeglądarki Internet Explorer, w takiej sytuacji pomocne będą komentarze warunkowe.

Korzystanie z tagu komentarza

Niewiele przeglądarek obsługuje znacznik <comment> do komentowania części kodu HTML.

Note- Tag <comment> został wycofany w HTML5. Nie używaj tego elementu.

Przykład

<!DOCTYPE html>
<html>

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

Jeśli używasz IE, to da następujący wynik -

Ale jeśli nie używasz IE, to da następujący wynik -

Komentowanie kodu skryptu

Chociaż nauczysz się JavaScript z HTML, w osobnym samouczku, ale tutaj musisz zauważyć, że jeśli używasz Java Script lub VB Script w swoim kodzie HTML, zaleca się umieszczenie tego kodu skryptu w odpowiednich komentarzach HTML, aby stary przeglądarki mogą działać poprawnie.

Przykład

<!DOCTYPE html>
<html>

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

To da następujący wynik -

Komentowanie arkuszy stylów

Chociaż nauczysz się używać arkuszy stylów z HTML w osobnym samouczku, ale tutaj musisz zauważyć, że jeśli używasz kaskadowego arkusza stylów (CSS) w swoim kodzie HTML, to zaleca się umieszczenie tego kodu arkusza stylów w odpowiednich komentarzach HTML aby stare przeglądarki działały poprawnie.

Przykład

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

To da następujący wynik -