Comentários no HTML: anotações invisíveis no código

Imagine que você está montando um quebra-cabeça enorme e decide deixar bilhetinhos colados nas peças para lembrar onde cada uma vai. Esses bilhetinhos não fazem parte da imagem final — são só para te ajudar durante a montagem.

Os comentários no HTML funcionam exatamente assim: são anotações que você deixa dentro do código para explicar, organizar ou lembrar algo — e que nunca aparecem na página para o usuário.

Como escrever um comentário

A sintaxe de um comentário em HTML é sempre a mesma:

<!-- Isso é um comentário -->

• <!-- → abre o comentário
• --> → fecha o comentário
• Tudo entre esses dois marcadores é ignorado pelo navegador

O comentário pode ser em uma única linha:

<!-- Este é um comentário de uma linha -->

Ou ocupar várias linhas:

<!--
  Este é um comentário
  que ocupa
  várias linhas
-->

O que acontece com os comentários no navegador?

O navegador lê o arquivo HTML completo — incluindo os comentários — mas simplesmente os ignora durante a renderização. Eles não aparecem na tela, não ocupam espaço visual e não afetam o layout.

<p>Este parágrafo aparece na página.</p>

<!-- Este comentário não aparece em lugar nenhum. -->

<p>Este também aparece normalmente.</p>

Resultado visual na página:

Este parágrafo aparece na página.
Este também aparece normalmente.

⚠️ Atenção importante: embora os comentários não apareçam visualmente na página, eles são visíveis no código fonte. Qualquer pessoa pode abrir as DevTools do navegador ou o código fonte e lê-los. Por isso, nunca coloque informações sensíveis em comentários — como senhas, tokens ou dados confidenciais.

Para que servem os comentários?

1. Explicar trechos de código

Quando você escreve algo que pode ser difícil de entender depois — para você mesmo ou para outra pessoa — um comentário é a solução:

<!-- Seção do formulário de contato -->
<form action="/contato" method="POST">
  <!-- Campo obrigatório: o usuário deve preencher o nome completo -->
  <input type="text" name="nome" placeholder="Seu nome completo">
</form>

2. Organizar seções do código

Em páginas maiores, os comentários ajudam a separar visualmente as seções do HTML, tornando muito mais fácil encontrar o que você precisa:

<!-- ==================== CABEÇALHO ==================== -->
<header>
  <h1>Meu Site</h1>
  <nav>...</nav>
</header>

<!-- ==================== CONTEÚDO PRINCIPAL ==================== -->
<main>
  <article>...</article>
</main>

<!-- ==================== RODAPÉ ==================== -->
<footer>
  <p>© 2026 Meu Site</p>
</footer>

3. Desativar código temporariamente

Às vezes você quer testar como a página fica sem um determinado trecho de código — mas não quer apagá-lo de vez. Comentar o trecho é a solução perfeita:

<ul>
  <li>Início</li>
  <li>Sobre</li>
  <!-- <li>Blog</li> -->  ← desativado temporariamente
  <li>Contato</li>
</ul>

O item "Blog" não vai aparecer na página, mas continua no código para ser reativado depois — é só remover o comentário.

4. Deixar lembretes e tarefas pendentes

Comentários são ótimos para marcar pontos do código que ainda precisam de atenção:

<!-- TODO: adicionar validação neste formulário -->
<form>
  <input type="email" name="email">
  <button>Enviar</button>
</form>

<!-- FIXME: este link está quebrado -->
<a href="">Saiba mais</a>

<!-- REVISAR: verificar se essa seção ainda é necessária -->
<section>...</section>

Usar prefixos como TODO, FIXME e REVISAR é uma convenção popular entre desenvolvedores para facilitar a busca por pontos pendentes no código.

Comentários dentro de outros contextos

Vale saber que a sintaxe <!-- --> é exclusiva do HTML. Quando você trabalhar com CSS e JavaScript, os comentários têm sintaxes diferentes:

/* Isso é um comentário em CSS */

// Isso é um comentário de uma linha em JavaScript

/*
  Isso é um comentário
  de múltiplas linhas em JavaScript
*/

Cada linguagem tem sua própria forma de comentar — mas o propósito é sempre o mesmo: deixar anotações para humanos sem afetar o funcionamento do código.

Boas práticas com comentários

✅ Comente o porquê, não o óbvio

Um comentário que explica por que algo foi feito de determinada forma é muito mais útil do que um que repete o que o código já mostra claramente:

<!-- ❌ Desnecessário — o código já diz isso -->
<!-- Este é um parágrafo -->
<p>Texto do parágrafo.</p>

<!-- ✅ Útil — explica uma decisão não óbvia -->
<!-- Usando div aqui em vez de section porque este bloco
     não tem um título semântico associado -->
<div class="bloco-destaque">...</div>

✅ Mantenha os comentários atualizados

Um comentário desatualizado é pior do que nenhum comentário — ele confunde em vez de ajudar. Se você mudar o código, lembre-se de atualizar os comentários relacionados.

✅ Não exagere

Comentar cada linha do código polui a leitura. Use comentários onde eles realmente agregam valor — para explicar trechos complexos, demarcar seções ou marcar pontos de atenção.

✅ Use para organizar, não para esconder bagunça

Comentários não substituem um código bem escrito. Antes de adicionar um comentário para explicar um trecho confuso, pergunte se dá para reescrever o código de forma mais clara.

Atalho no VS Code

No VS Code, você não precisa digitar <!-- e --> manualmente. Existe um atalho que comenta e descomenta automaticamente qualquer linha ou bloco selecionado:

• Windows/Linux: Ctrl + /
• macOS: Cmd + /

Selecione uma ou mais linhas e pressione o atalho — o VS Code envolve tudo com a sintaxe de comentário correta para a linguagem do arquivo aberto.

Resumindo