Desminificar HTML online
Transforme o código-fonte comprimido de uma página em marcação legível. As etiquetas são indentadas de acordo com a profundidade de aninhamento, os atributos são apresentados de forma organizada, e os scripts e estilos incorporados são formatados juntamente com o documento.
Porque é que o código-fonte das páginas tem esse aspeto
Os minificadores de HTML reduzem os espaços entre etiquetas, removem comentários, eliminam etiquetas de fecho opcionais e retiram as aspas de valores de atributos que não precisam delas. Os modelos processados no servidor contribuem para essa desorganização, porque uma página montada a partir de dezenas de fragmentos chega como um único fluxo sem relação visível com os ficheiros que a produziram. Abra o código-fonte de quase qualquer site em produção e encontrará um documento com poucas linhas enormes, onde localizar a etiqueta de fecho de uma secção exige contar os sinais de menor e maior à vista.
O essencial é a estrutura
HTML é uma árvore, e uma árvore torna-se ilegível quando é apresentada sem níveis. A indentação de acordo com o aninhamento revela imediatamente a forma do documento: onde termina o cabeçalho, que contentor envolve o conteúdo principal, a que profundidade está um componente e onde deve investigar uma relação de aninhamento inesperada. É isso que torna o código-fonte formatado útil para verificar a ordem dos títulos, analisar a marcação gerada por uma biblioteca ou compreender como um concorrente estruturou uma secção. Escolha a origem adequada à sua pergunta. O código-fonte guardado de uma página mostra a marcação entregue pelo servidor, enquanto a marcação copiada do painel Elementos pode incluir alterações feitas por scripts no cliente. A formatação não concilia essas duas vistas nem reproduz o DOM durante a execução. Ao investigar um elemento inesperado, compare o código-fonte com o documento em execução e analise o script responsável pela sua inserção. Da mesma forma, uma estrutura de títulos bem indentada ajuda numa revisão manual, mas não constitui uma auditoria de acessibilidade da página completa.
Os scripts e estilos incorporados também
Uma página real quase nunca é apenas marcação. Excertos de código de análise de tráfego, dados estruturados JSON-LD, objetos de configuração e CSS crítico estão incorporados diretamente no documento, e um minificador comprime tudo isso também. O formatador trata cada bloco incorporado com o analisador certo: uma etiqueta script que contém JavaScript minificado sai como JavaScript legível, uma etiqueta style sai como CSS legível, tudo dentro de um documento corretamente indentado.
Reveja o conteúdo sensível a espaços em branco
Os espaços em branco podem afetar a apresentação do HTML, sobretudo junto de texto em linha e dentro de elementos como pre e textarea. O formatador utiliza regras que têm em conta o comportamento habitual dos espaços em HTML, mas a formatação não é um teste de regressão visual. Guarde a página original e verifique o resultado no seu contexto real antes de publicar alterações. A apresentação também depende de folhas de estilos, scripts e comportamentos do navegador que não são avaliados aqui. Para investigação, uma cópia formatada é útil para ler o documento, sem presumir que prova que a página será apresentada de forma idêntica.
Perguntas frequentes
Posso colar o código-fonte de uma página inteira?
Sim. Copie o código-fonte a partir do navegador com view-source, ou guarde a página e abra o ficheiro, e o documento completo será formatado, incluindo o head, o body, os scripts incorporados e os dados estruturados.
A formatação altera a apresentação da página?
O formatador procura respeitar os espaços significativos em HTML, mas deve comparar o resultado antes de o publicar. O texto em linha, o conteúdo pré-formatado e as interações com os estilos podem tornar o espaçamento relevante. Guarde uma cópia original e teste a apresentação no projeto onde a marcação é efetivamente utilizada.
Funciona com modelos como Twig ou Blade?
O editor destina-se a HTML entregue a um navegador. Twig, Blade e outras linguagens de modelos introduzem sintaxe que o formatador HTML pode rejeitar ou tratar de forma inesperada. Para obter uma vista fiável da marcação gerada, processe o modelo através do seu projeto e formate o documento HTML resultante.