Docs executáveis de HTML: Comentário HTML

Q: Como escrever um comentário em HTML?

Comece com : . Tudo o que fica entre os dois marcadores é ignorado pelo navegador, inclusive tags, então a mesma sintaxe serve para comentar código.

Q: Dá para aninhar comentários HTML?

Não. O primeiro --> encerra o comentário, então em c --> o texto c --> aparece na página. Para comentar um bloco que já contém um comentário, remova ou altere o comentário interno antes.

Q: Comentários HTML funcionam dentro de CSS ou JavaScript?

Não. Dentro de um elemento use / ... /, e dentro de um use // ou / ... /. Um comentário HTML num bloco de estilo não esconde as regras CSS que estão dentro dele.

Como escrever um comentário em HTML

Um comentário HTML começa com . O navegador ignora tudo o que fica entre os dois marcadores, então o texto nunca aparece na página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Só o título e o parágrafo aparecem. Existe uma única sintaxe de comentário em HTML, e ela funciona para uma linha ou para muitas.

O atalho no VS Code e na maioria dos editores: selecione algumas linhas e pressione Ctrl + / (Cmd + / no Mac). O editor adiciona os marcadores para você, e as mesmas teclas os removem.

Comentando código

Como o navegador ignora as tags dentro de um comentário, envolver a marcação com  esconde o trecho sem apagá-lo. É o jeito mais rápido de testar uma página sem um elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Apague  na linha do banner e ele volta a aparecer. O código comentado continua sendo baixado com a página, então, quando tiver certeza de que não precisa dele, apague-o.

Comentários não podem ser aninhados

O primeiro --> sempre fecha o comentário. Se o código que você está comentando já tem um comentário, o comentário externo termina antes da hora e o resto vaza para a página. Este exemplo passa comentários aninhados ao parser do navegador e mostra o que fica visível:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> aparece como texto. Antes de comentar um bloco grande, remova os comentários dentro dele (ou altere o --> deles para que não corresponda mais).

Mais algumas regras: um comentário não pode começar com , então deixe os dois fora do texto do comentário.

Comentários são públicos

Os comentários fazem parte do HTML que o servidor envia, então qualquer visitante pode lê-los com Exibir código-fonte ou nas ferramentas de desenvolvedor. Um script também consegue listá-los:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Use comentários só para anotações sobre o código. Nada privado (senhas, chaves de API, URLs internas, dados de clientes) pode ficar no HTML, comentado ou não. Ferramentas de build e minificadores costumam remover os comentários do HTML de produção, o que também economiza alguns bytes.

Comentários em CSS e JavaScript

Comentários HTML só funcionam no HTML. Dentro de <style> e <script> você usa a sintaxe de comentário da linguagem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

O título fica azul: o CSS ignora os próprios marcadores  e continua aplicando a regra entre eles. Só /* ... */ desativa CSS. A página de comentários em CSS explica essa sintaxe.

Comentários condicionais

Código antigo às vezes tem . Eram instruções para o Internet Explorer 9 e versões anteriores. Todos os navegadores atuais os tratam como comentários comuns, então o conteúdo de dentro é ignorado e o bloco inteiro pode ser apagado.

Erros comuns

Aninhar comentários. O --> interno encerra o comentário externo. Remova os comentários internos antes de comentar um bloco.
Colocar segredos em comentários. Os comentários são enviados a todos os visitantes.
Um --> faltando. Tudo depois de <!-- até o fim do arquivo some, e parece que metade da página desapareceu.
Usar  no CSS. Isso não desativa as regras. Use /* */.
Usar // no HTML. // note aparece como texto. O HTML só entende .

Perguntas frequentes

Como escrever um comentário em HTML?

Comece com : . Tudo o que fica entre os dois marcadores é ignorado pelo navegador, inclusive tags, então a mesma sintaxe serve para comentar código.

Como fazer um comentário de várias linhas em HTML?

O HTML tem uma única sintaxe de comentário, e ela pode ocupar quantas linhas você quiser. Coloque  depois da última.

Qual é o atalho para comentar em HTML?

No VS Code e na maioria dos editores de código, selecione as linhas e pressione Ctrl + / (Windows e Linux) ou Cmd + / (Mac). O editor envolve a seleção com , e as mesmas teclas removem os marcadores.

Dá para aninhar comentários HTML?

Não. O primeiro --> encerra o comentário, então em  c --> o texto c --> aparece na página. Para comentar um bloco que já contém um comentário, remova ou altere o comentário interno antes.

Os usuários conseguem ver os comentários HTML?

Eles não são exibidos, mas são enviados ao navegador junto com a página. Qualquer pessoa pode lê-los com Exibir código-fonte ou nas ferramentas de desenvolvedor, então nunca coloque senhas, chaves ou anotações privadas neles.

Comentários HTML funcionam dentro de CSS ou JavaScript?

Não. Dentro de um elemento <style> use /* ... */, e dentro de um <script> use // ou /* ... */. Um comentário HTML num bloco de estilo não esconde as regras CSS que estão dentro dele.

Conceitos relacionados