GUIAS PRÁTICOS · Web e códigos
Espaços e indentação em HTML
Veja quais espaços podem mudar uma página e o que conferir depois de formatar um fragmento HTML.
Por Puffinmint · Atualizado em
Por que espaços entre tags importam
A indentação facilita ler o código, mas os nós de texto fazem parte do documento. Espaços entre elementos inline podem separar palavras ou imagens.
Formate uma cópia preservando o texto
Trabalhe em uma cópia HTML. Atributos e blocos pre, script, style, textarea e title são preservados; espaços entre blocos são ajustados. Não há conversão de JSX nem validação do documento.
-
Dados de entrada
<div><p>A <strong>B</strong> C</p></div> -
Passos do cálculo
Escolha e aplique o método
-
Resultado
<div> <p>A <strong>B</strong> C</p> </div>
EXPERIMENTE ESTA ETAPA
Formatador HTML online
Trabalhe nesta guia: carregue um exemplo, execute a ferramenta e altere os dados para comparar resultados. O segundo experimento testa outro caso.
Um exemplo reproduzível
Em uma frase com strong, os espaços em volta do elemento separam palavras. Preserve-os. Dentro de pre, quebras de linha e espaços iniciais devem permanecer, mesmo com o contêiner externo indentado.
Preserve um espaço inseparável
O segundo exemplo contém U+00A0 entre dois div. Formate e copie o resultado: esse espaço deve permanecer. A ferramenta não mostra prévia HTML nem executa scripts.
Resultado
Insira os dados para ver o resultado.
Espaços inline e conteúdo de pre
Em uma frase com strong, os espaços em volta do elemento separam palavras. Preserve-os. Dentro de pre, quebras de linha e espaços iniciais devem permanecer, mesmo com o contêiner externo indentado.
Caso de uso
- Dados de entrada
<div><p>A <strong>B</strong> C</p></div>- Resultado
<div> <p>A <strong>B</strong> C</p> </div>
Confira o código no projeto
Confira com o CSS do projeto, especialmente white-space, e os testes do template. Formatar não comprova aninhamento correto. A ferramenta mostra texto e não executa HTML ou scripts.
São dados de exemplo, não medições de um caso real. O resultado usa o mesmo mecanismo da ferramenta completa. Compare com as etapas do guia e marque as verificações após conferir.
| Parâmetro | Valor |
|---|---|
| Quais são os limites da ferramenta? | Até 100.000 caracteres e 10.000 tokens. Somente HTML, sem validação ou JSX. Espaços entre blocos podem mudar. |
| Processamento e privacidade | Os dados e resultados são processados no navegador e não são enviados ao servidor. As estatísticas agregadas, quando ativas, registram apenas a ferramenta e o status do processamento, sem o conteúdo. |