HTML - comentários

O comentário é um trecho de código que é ignorado por qualquer navegador da web. É uma boa prática adicionar comentários ao código HTML, especialmente em documentos complexos, para indicar seções de um documento e quaisquer outras notas para quem está olhando o código. Os comentários ajudam você e outras pessoas a entender seu código e aumenta a legibilidade do código.

Os comentários HTML são colocados entre Tag. Portanto, qualquer conteúdo colocado nas tags <! - ... -> será tratado como comentário e será completamente ignorado pelo navegador.

Exemplo

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

Isso produzirá o seguinte resultado, sem exibir o conteúdo fornecido como parte dos comentários -

Comentários válidos vs inválidos

Os comentários não são aninhados, o que significa que um comentário não pode ser colocado dentro de outro comentário. Em segundo lugar, a sequência de traços duplos "-" pode não aparecer dentro de um comentário, exceto como parte da tag de fechamento ->. Você também deve se certificar de que não há espaços na string de início do comentário.

Exemplo

Aqui, o comentário fornecido é um comentário válido e será apagado pelo navegador.

<!DOCTYPE html>
<html>

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

Isso produzirá o seguinte resultado -

Porém, a linha a seguir não é um comentário válido e será exibido pelo navegador. Isso ocorre porque há um espaço entre o colchete angular esquerdo e o ponto de exclamação.

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

Isso produzirá o seguinte resultado -

Comentários multilinha

Até agora, vimos comentários de uma única linha, mas o HTML também oferece suporte a comentários de várias linhas.

Você pode comentar várias linhas com a tag especial de início <! - e tag de finalização -> colocada antes da primeira linha e no final da última linha, conforme mostrado no exemplo abaixo.

Exemplo

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

Isso produzirá o seguinte resultado -

Comentários condicionais

Os comentários condicionais funcionam apenas no Internet Explorer (IE) no Windows, mas são ignorados por outros navegadores. Eles são suportados a partir do Explorer 5 e você pode usá-los para fornecer instruções condicionais para diferentes versões do IE.

Exemplo

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

Você se deparará com uma situação em que precisará aplicar uma folha de estilo diferente com base em diferentes versões do Internet Explorer; em tal situação, comentários condicionais serão úteis.

Usando tag de comentário

Existem poucos navegadores que suportam a tag <comment> para comentar uma parte do código HTML.

Note- A tag <comment> tornou-se obsoleta em HTML5. Não use este elemento.

Exemplo

<!DOCTYPE html>
<html>

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

Se você estiver usando o IE, ele produzirá o seguinte resultado -

Mas se você não estiver usando o IE, ele produzirá o seguinte resultado -

Código do Script de Comentário

Embora você aprenda JavaScript com HTML, em um tutorial separado, mas aqui você deve tomar nota de que se estiver usando Java Script ou VB Script em seu código HTML, é recomendável colocar esse código de script dentro de comentários HTML adequados para que navegadores podem funcionar corretamente.

Exemplo

<!DOCTYPE html>
<html>

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

Isso produzirá o seguinte resultado -

Comentando folhas de estilo

Embora você aprenda a usar folhas de estilo com HTML em um tutorial separado, aqui você deve tomar nota de que, se estiver usando Folha de Estilo em Cascata (CSS) em seu código HTML, é recomendável colocar esse código de folha de estilo dentro de comentários HTML adequados para que os navegadores antigos funcionem corretamente.

Exemplo

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

Isso produzirá o seguinte resultado -