Embeleze Marcação HTML Bagunçada
Este formatador de HTML transforma marcação minificada ou emaranhada em HTML limpo e corretamente indentado em tempo real, direto no seu navegador. Cole uma página de uma linha ou uma bagunça de tags aninhadas e o resultado embelezado aparece na hora no painel à direita, com indentação consistente e atributos organizados.
Casos de Uso Comuns
Desminificar Páginas
Organizar Marcação
Revisar e Aprender
Como Formatar HTML
Cole Sua Marcação
Digite ou cole HTML no painel Entrada à esquerda. Você também pode Enviar um arquivo .html ou clicar em Exemplo para carregar um modelo.
Veja a Saída Instantânea
A marcação formatada e com destaque de sintaxe aparece automaticamente no painel à direita enquanto você digita. Números de linha e um contador de tamanho em tempo real facilitam navegar por documentos grandes. Pressione Ctrl + Shift + F para reformatar quando quiser.
Ajuste as Opções
Defina o recuo (2, 3, 4, 8 espaços ou Tab), a largura da linha, como os atributos quebram e onde a chave de fechamento fica. A saída é reformatada imediatamente.
Copie ou Baixe
Clique em Copiar para pegar o resultado ou em Baixar para salvá-lo como arquivo .html. Use Editar para ajustar a saída manualmente antes de exportar.
Opções do Embelezador de HTML
Controles de Formatação
Esses controles adaptam a saída HTML do Prettier ao seu estilo de marcação preferido. Cada alteração reformata o resultado na hora.
| Opção | Escolhas | O Que Controla |
|---|---|---|
| Recuo | 2 · 3 · 4 · 8 espaços · Tab | Largura e caractere de indentação usados por nível de aninhamento (padrão 4 espaços). |
| Largura da linha | 80 · 100 · 120 | Comprimento de linha alvo antes de tags longas e texto quebrarem (padrão 80). |
| Atributos | Quebra automática · Um por linha | Se os atributos ficam na mesma linha ou cada um vai para a sua própria linha. |
| Chave | Nova linha · Mesma linha | Se a > de fechamento de uma tag em várias linhas vai para uma nova linha. |
O Que é Formatado
Tags e Atributos
Aninhamento consistente, espaçamento de atributos organizado e tratamento correto de elementos autofecháveis e vazios.
CSS e JS Embutidos
O código dentro de blocos <style> e <script> é formatado inline junto com a marcação.
Ferramentas Integradas
Formatação em Tempo Real
A saída é atualizada enquanto você digita, com destaque de sintaxe e números de linha correspondentes.
Enviar e Baixar
Carregue um arquivo .html local ou exporte o resultado formatado com um clique.
Saída Editável
Mude o painel de resultado para o modo de edição e faça ajustes manuais antes de copiar.
Perguntas Frequentes
O que um formatador de HTML faz?
Ele reindenta HTML bruto, minificado ou bagunçado em marcação limpa e legível, com espaçamento e quebras de linha consistentes. "Formatador de HTML" e "embelezador de HTML" descrevem a mesma tarefa — tornar a marcação fácil de ler e manter.
A formatação muda como a página é renderizada?
Não. Embelezar apenas ajusta espaços e indentação para legibilidade. As tags, os atributos e o conteúdo permanecem os mesmos, então a página aparece e funciona exatamente como antes.
Meu HTML é enviado para um servidor?
Não. Toda a formatação acontece localmente no seu navegador. Sua marcação nunca é enviada, registrada ou armazenada, então é seguro formatar páginas proprietárias ou não lançadas.
Ele formata o CSS e o JavaScript dentro da página?
Sim. O código dentro das tags <style> e <script> é formatado inline junto com o HTML ao redor, então o documento inteiro fica consistente.
Posso colocar cada atributo em sua própria linha?
Sim. Defina a opção Atributos como "Um por linha" para quebrar cada atributo em uma linha separada, ou deixe em "Quebra automática" para o Prettier decidir com base na largura da linha que você escolher.
Ele também minifica HTML?
Não. Esta ferramenta é um embelezador — ela expande e indenta a marcação para legibilidade, em vez de comprimi-la. Para reduzir uma página para produção, use um minificador de HTML dedicado.
O que acontece se a marcação estiver malformada?
Se o analisador não conseguir processar a entrada, a ferramenta mostra uma mensagem de erro descrevendo o problema em vez de gerar uma saída quebrada. Corrija o problema indicado e o resultado formatado reaparece.