Comentários HTML

Um comentário HTML é uma anotação na sua marcação que o navegador ignora: ela não é renderizada na página e não tem efeito no layout. Os comentários existem exclusivamente para as pessoas que leem e mantêm o código-fonte. Eles ajudam a explicar por que um trecho de marcação existe, deixar lembretes para mais tarde e desativar código temporariamente sem excluí-lo.

Esta página cobre a sintaxe de comentários, comentários de uma e múltiplas linhas, as regras que tornam um comentário válido (e os erros que o quebram), como comentar código durante a depuração e os comentários condicionais legados do Internet Explorer que você ainda pode encontrar em projetos antigos.

Sintaxe

Um comentário abre com <!-- e fecha com -->. Tudo entre esses marcadores é ignorado pelo navegador:

<!-- This is an HTML comment -->

Você pode colocar um comentário em sua própria linha ou após alguma marcação na mesma linha:

<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->

O --> de fechamento é obrigatório. Se você esquecer, o navegador continuará tratando tudo que vem a seguir como parte do comentário até encontrar o próximo --> (ou o fim do documento), o que oculta silenciosamente partes da sua página — um bug comum e confuso.

Por que usar comentários

• Explicar a intenção. O código mostra o que acontece; um comentário pode registrar por que. "Por que esta <div> está vazia?" é respondido por uma nota de uma linha.
• Colaboração. Em um código compartilhado, os comentários dizem aos colegas como uma seção deve funcionar.
• Notas TODO / FIXME. Marque trabalhos inacabados ou problemas conhecidos para encontrá-los facilmente depois (<!-- TODO: add alt text -->).
• Depuração. Oculte marcação temporariamente para isolar um problema sem perder o código original.

Comentários de uma e múltiplas linhas

A mesma sintaxe <!-- --> funciona para uma linha ou muitas. Um comentário de múltiplas linhas simplesmente abrange várias linhas entre os marcadores de abertura e fechamento:

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Everything here is ignored by the browser,
  no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>

O HTML não possui uma sintaxe de bloco de comentário separada — ao contrário do CSS, que usa /* ... */, ou do JavaScript, que usa // e /* ... */. Em HTML é sempre <!-- -->.

Comentar código para depuração

Envolver marcação em um comentário é uma forma rápida de desativá-la sem excluí-la. Isso é inestimável quando você está procurando qual elemento está causando um problema:

<h1>The main heading</h1>

<!-- Temporarily disabled while debugging the layout
<aside>
  <p>This sidebar is hidden for now.</p>
</aside>
-->

<a href="https://www.w3docs.com">Homepage</a>

O <aside> acima não é renderizado e o navegador nem mesmo o constrói no DOM. Quando terminar, remova o <!-- e o --> para restaurar o código.

Comentários válidos vs. inválidos

Um comentário tem algumas regras. Quebrá-las pode fazer o navegador tratar seu comentário como texto ou engolir marcação que você queria manter.

Você não pode aninhar comentários. O primeiro --> fecha o comentário, portanto o segundo --> se torna texto solto na página:

<!-- outer comment <!-- inner comment --> still inside? -->

Aqui o comentário termina no primeiro -->. O restante still inside? --> é renderizado como texto visível — quase nunca é o que você queria.

Evite -- dentro de um comentário. De acordo com a especificação HTML, o texto de um comentário não deve conter -- exceto como parte do --> de fechamento. Ele também não deve começar com > ou ->. Estes são válidos:

<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->

E estes são problemáticos:

<!-- Don't use a -- double dash inside -->   <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker     <-- the rest of the page may vanish

O hábito mais seguro: abra com <!--, escreva sua anotação usando traços simples ou palavras e sempre feche com -->.

Experimente: comentários HTML em um documento completo

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <!-- <p>We want to hide this paragraph temporarily.</p> -->
    <a href="https://www.w3docs.com">Homepage</a>
    <!-- TODO: this link will point to the homepage -->
  </body>
</html>

O navegador renderiza apenas o cabeçalho e o link. As duas linhas comentadas não produzem nada na tela, como a visualização ao vivo abaixo mostra.

Comentários condicionais (Internet Explorer legado)

Versões antigas do Internet Explorer (IE 5 ao IE 9) suportavam uma sintaxe especial de comentário condicional. Para todos os outros navegadores parecia um comentário comum e era ignorado, mas o IE lia e executava a marcação interna quando a condição era atendida:

<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css">
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an old version of Internet Explorer.</p>
<![endif]-->

Essa era uma forma padrão de entregar CSS ou scripts apenas para versões específicas do IE. Os comentários condicionais são obsoletos. O Internet Explorer 10 abandonou o suporte a eles, e os navegadores modernos nunca os suportaram, portanto você não deve usar essa técnica em código novo. O assunto é abordado aqui apenas para que você o reconheça em projetos legados.

Onde comentários podem e não podem ir

Todos os navegadores modernos suportam comentários HTML e ignoram seu conteúdo, portanto a sintaxe é segura para usar em qualquer lugar que sua marcação precise de explicação.

Prática