Formatter HTML
Formate trechos de HTML com este Formatter HTML. Cole a marcação e a ferramenta coloca elementos de bloco, como div, section, p, ul e table, em linhas próprias com indentação de dois espaços, reduz espaços em branco dispersos no conteúdo em linha, formata CSS e JavaScript em linha e mantém intacto o conteúdo de pre e textarea. Ideal para desenvolvedores e designers Web que organizam marcações coladas, geradas ou minificadas para leitura e revisão.
Perguntas frequentes
Como o Formatter HTML decide onde quebrar as linhas?
Um elemento que contém filhos de nível de bloco, como div, section, article, header, footer, nav, main, form, p, h1 a h6, ul, ol, table ou blockquote, é expandido para que cada filho fique em sua própria linha, com indentação de dois espaços. Elementos sem filhos de bloco permanecem em uma única linha.
Por que meu documento HTML completo é retornado em uma única linha?
Pelas regras do formatador, os elementos html, head e body não são tags de nível de bloco; portanto, um documento envolvido por eles permanece em linha, exceto pelo doctype. Cole o conteúdo de dentro de body, ou o trecho em que está trabalhando, para expandi-lo.
O que acontece com os espaços em branco?
No conteúdo em linha, sequências de espaços, tabulações e quebras de linha são reduzidas a um único espaço, como os navegadores as exibem. O conteúdo dos elementos pre e textarea mantém os espaços em branco exatamente como estão.
Scripts e estilos em linha são formatados?
Sim, blocos style são formatados como CSS e blocos script como JavaScript, ou como JSON para tipos JSON e JSON-LD. Scripts com outros tipos, como modelos de texto, são mantidos exatamente como foram escritos.
Como os elementos vazios são escritos?
Tags autocontidas, como <br/>, são escritas com um espaço antes da barra, como <br />. Elementos vazios escritos sem barra, como <img src="a.png">, mantêm a forma original.
Os atributos são alterados?
Não, os atributos, suas aspas e sua ordem são mantidos exatamente como foram escritos. Apenas os espaços em branco entre os elementos são reorganizados.
Os comentários são preservados?
Sim, comentários HTML e o doctype são mantidos e colocados em linhas próprias. O conteúdo é copiado exatamente, inclusive a marcação comentada.
O formatador corrige HTML inválido?
Não, ele não valida nem corrige a marcação. Tags não fechadas são formatadas da melhor maneira possível; portanto, execute um validador quando precisar encontrar erros estruturais.
Por que o resultado vem envolvido em uma cerca de código html?
O resultado é retornado como um bloco de código Markdown marcado como html, então é exibido com realce em Markdown. Copie as linhas entre as cercas ao colar o conteúdo em um arquivo .html.
Quanto HTML posso formatar?
Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção HTML do Code Formatter.