Comentários, quebras de linha e espaços em HTML, com resultado ao vivo | We.Inc
Como escrever comentários em HTML e CSS, adicionar quebras de linha e espaços extras, e evitar que os espaços se juntem. Cada exemplo é editável, com o resultado renderizado ao lado.
Comentários, quebras de linha e espaços em HTML
Escreva um comentário HTML como <!-- note -->; os navegadores ignoram tudo o que fica entre os marcadores. Force uma quebra de linha dentro do texto com <br> e comece um novo parágrafo com <p>. Os navegadores juntam sequências de espaços em um só, então use para um único espaço fixo, ou a propriedade CSS white-space para manter o espaçamento que você digitou.
Referência rápida
Você quer
Use
Observações
Uma nota no HTML
<!-- note -->
Visível no código-fonte, nunca na tela
Uma nota no CSS
A única forma de comentário que o CSS tem
Uma quebra de linha numa linha de texto
<br>
Endereços, poemas, letras de música
Um novo bloco de texto
Dá um espaçamento que você pode estilizar
Um espaço que nunca se junta nem quebra
Entre um número e a unidade dele
Manter todos os espaços e quebras de linha
white-space: pre-wrap
Ainda quebra linhas longas
Cada caso desta página mostra o código e o que o navegador realmente desenha. Edite qualquer exemplo e o resultado é atualizado, para você entender por que um espaço sumiu ou uma quebra não fez nada antes de alterar a sua própria página.
Encontre nas seções abaixo o caso que corresponde ao seu problema: comentários, quebras, espaços ou a propriedade white-space.
Edite o código à esquerda. O resultado à direita é uma renderização real do navegador em um frame isolado, com scripts desativados.
Copie para a sua página a versão que faz o que você precisa.
Se o espaçamento ainda parecer errado, confira os dez erros perto do fim da página; a maioria dos problemas de espaços que somem é um deles.
Use comentários para explicar por que o markup é assim, não o que ele é. Um comentário que diz <!-- nav --> acima de um elemento nav não acrescenta nada.
Remova comentários do HTML de produção se eles tiverem notas internas, porque qualquer pessoa pode lê-los com Exibir código-fonte.
Prefira margin ou gap do CSS a uma pilha de tags <br>. O espaçamento em CSS pode mudar conforme o tamanho da tela; uma fileira de quebras não pode.
Coloque entre valores que precisam ficar na mesma linha, como 10 km ou Mr. Khan, em vez de usá-lo para recuo.
Perguntas frequentes
Como comento várias linhas de HTML?
Coloque <!-- antes da primeira linha e --> depois da última. Tudo o que estiver entre eles, em qualquer número de linhas, é ignorado. Não dá para aninhar um comentário dentro de outro, porque o primeiro --> encerra o comentário inteiro e o resto aparece como texto.
Por que meu HTML ignora os espaços extras?
O HTML trata qualquer sequência de espaços, tabs e quebras de linha em texto normal como um único espaço. Isso permite indentar o código-fonte à vontade sem mudar a página. Para manter vários espaços, use entidades ou defina white-space: pre-wrap no elemento via CSS.
É <br>, <br/> ou <br />?
As três formas funcionam em HTML. <br> é a forma simples do HTML. A barra é opcional e ignorada pelo parser de HTML, mas o JSX no React exige o <br /> com fechamento automático.
Posso usar comentários // no CSS?
Não. O CSS só entende /* */. Uma linha que começa com // não é um comentário: o parser a trata como código quebrado e descarta a declaração, ou até a regra inteira que vem depois, e é por isso que o bug pode parecer aleatório.
Comentários condicionais ainda funcionam?
Não. Comentários condicionais como <!--[if IE]> só eram lidos por versões antigas do Internet Explorer e deixaram de existir no Internet Explorer 10. Todo navegador atual os trata como comentários normais, então qualquer markup dentro deles nunca aparece.
Quando a quebra de linha é a ferramenta certa
Um <br> faz sentido onde a quebra de linha faz parte do próprio conteúdo: as linhas de um endereço postal, um verso de poema, um bloco de assinatura. Nesses lugares, um leitor manteria a quebra se copiasse o texto à mão.
Em qualquer outro lugar, a quebra é layout, e layout pertence ao CSS. Dois parágrafos separados por <br><br> parecem bons até o design precisar de mais espaço no desktop e menos no celular. Dois elementos <p> com margin podem mudar em qualquer breakpoint, e os leitores de tela os anunciam como parágrafos separados.
Por que os espaços se juntam, e as quatro formas de contornar isso
O padrão do navegador para texto normal é white-space: normal, que junta cada sequência de espaços em branco em um só espaço e quebra as linhas onde precisar. É por isso que a indentação do seu código-fonte nunca aparece na tela.
Para manter espaços, você pode usar entidades ( e as mais largas   e  ), um elemento <pre>, ou um dos valores de white-space: pre, pre-wrap, pre-line e break-spaces. Entidades servem para um ou dois espaços fixos; os valores CSS servem para blocos inteiros de texto, como código, poemas ou notas digitadas pelo usuário.
Comentários são públicos
Comentários HTML são enviados a todos os visitantes. Eles não aparecem na página, mas estão no código-fonte, nas cópias salvas e no que os mecanismos de busca baixam. Nunca deixe senhas, endereços internos, nomes de clientes ou notas TODO sobre falhas de segurança em um comentário.
A maioria das ferramentas de build pode remover comentários para você. O Vite e bundlers parecidos removem os comentários de JavaScript e CSS na minificação; comentários HTML no seu arquivo index podem precisar de uma etapa de minificador de HTML se você quiser eliminá-los.
Comentários HTML
Um comentário começa com <!-- e termina com -->. Ele pode ficar entre elementos ou envolver blocos inteiros para desativá-los enquanto você testa.
Comentários de uma linha e de várias linhas
Só os dois parágrafos são desenhados. Os comentários, inclusive o que envolve um parágrafo inteiro, não deixam rastro na tela.
Por que comentários não podem ser aninhados
O primeiro --> fecha o comentário externo antes da hora, então o texto que sobra e o --> final aparecem na página.
Comentários condicionais antigos não fazem mais nada
Só o Internet Explorer 9 e anteriores liam isso. Os navegadores atuais ignoram o aviso por completo, então é seguro apagar esse truque antigo.
Quebras de linha: <br>, <p> ou margin do CSS
Qual usar
Elemento
Significado
Use para
<br>
Uma quebra dentro de um bloco de texto
Endereços, poemas, letras de música
Um parágrafo separado
Qualquer nova ideia ou bloco de texto
CSS margin ou gap
Espaço entre blocos
Espaçamento de layout que muda conforme o tamanho da tela
<hr>
Uma mudança de assunto
Uma pausa temática entre seções
Um endereço com <br>
As quebras fazem parte do endereço, então <br> é a escolha correta aqui.
Tags <br> empilhadas versus parágrafos com margin
Os dois parecem iguais, mas a segunda versão tem parágrafos de verdade e um espaçamento que você altera em um só lugar.
Adicionando espaços: entidades
Entidades de espaço
Entidade
Caractere
Largura
Uso típico
U+00A0 espaço sem quebra
Espaço normal, nunca quebra
10 kg, page 3
 
U+2002 espaço en
Meio em
Espaços em listas ou menus
 
U+2003 espaço em
Um em
Recuar uma única linha
 
U+2009 espaço fino
Estreito
Entre grupos de dígitos em alguns estilos
Mantendo um valor junto da unidade
Na caixa estreita, a primeira linha pode quebrar entre 50 e km. O espaço sem quebra mantém o segundo par junto.
Espaços que se juntam versus entidades
Cinco espaços digitados viram um só. Cada entidade mantém a própria largura.
Mantendo espaços e quebras de linha com CSS white-space
Valores de white-space
Valor
Espaços
Quebras de linha
Quebra linhas longas
Juntados
Juntadas
Sim
Juntados
Juntadas
Não
Mantidos
Mantidas
Não
Mantidos
Mantidas
Sim
Juntados
Mantidas
Sim
Mantidos, e podem quebrar
Mantidas
Sim
pre, pre-wrap e pre-line lado a lado
O mesmo texto em três caixas. pre mantém tudo, mas passa da borda, pre-wrap mantém tudo e quebra, pre-line mantém só as quebras de linha.
Exibindo o texto que alguém digitou em um formulário
Notas de um textarea mantêm as quebras de linha quando exibidas com pre-line, sem o risco de transformar o texto em HTML.
Comentários CSS, e por que // quebra o CSS
A cor comentada é ignorada e a verde é aplicada.
O que // faz com a regra seguinte
A linha com // é lida como parte de um seletor, então a regra .warning inteira é descartada e o texto continua preto.
10 erros comuns
Erros e correções
Erro
O que acontece
Correção
Digitar vários espaços entre palavras
Eles se juntam em um só
ou white-space: pre-wrap
Usar <br><br> para espaçar parágrafos
O espaçamento não se adapta ao tamanho da tela
Elementos <p> separados e uma margin
Aninhar comentários
O texto depois do --> interno vaza para a página
Use um só comentário, ou apague o bloco
Escrever comentários // no CSS
A regra seguinte é ignorada
Use /* */
Escrever <!-- --> em um arquivo JavaScript
Erro de sintaxe ou comportamento estranho
Use // ou /* */ no JS
Deixar notas privadas em comentários HTML
Qualquer pessoa pode lê-las com Exibir código-fonte
Remova-as ou elimine os comentários no build
Recuar texto com fileiras de
Quebra em telas pequenas
padding-left ou text-indent
Dois hífens dentro de um comentário
Validadores antigos acusam erro; fica difícil de ler
Evite -- dentro do texto do comentário
Escrever <br> sem barra no JSX
O compilador JSX acusa um erro
Escreva <br /> no React
Esperar que as quebras de linha de um textarea apareçam