Eu construo ferramentas para viver, e a única coisa mais comum que faço antes de ler qualquer um & #39; s front end é executado seu HTML através de um formatador Os modelos de servidor cuspem marcação em uma linha Os empacotadores colapsam um trecho que alguém cola no Slack chega com três níveis de aninhamento achatados em uma parede de colchetes angulares Eu não posso depurar o que não consigo ler, então o primeiro movimento é sempre o mesmo: cole-o, bata embelezar e deixe a estrutura revelar-se Este guia é aquele que EU gostaria de ter entregue meu EU mais jovem, que costumava reindir marcação à mão e errou metade do tempo.
tl;dr: Um formatador HTML re-indenta marcação para que você possa ler sua estrutura, e minifica-lo de volta para baixo para que ele envia pequeno Usar embelezar enquanto você está construindo e depuração, minify para a produção O Formatador HTML no Toolz.dev faz as duas coisas em seu navegador, mantém seu script, estilo e byte por byte de pré-conteúdo e nunca carrega nada.
O que é um formatador HTML?
Um formatador HTML é uma ferramenta que analisa sua marcação em sua árvore de tags e a imprime de volta com recuo consistente, um nível por profundidade de aninhamento Essa é a direção de embelezamento O inverso, minificar, retira o espaço em branco insignificante entre as tags para que o arquivo seja o menor possível sem alterar a forma como um navegador o renderiza A maioria dos bons formatadores, incluindo o da Toolz.dev, faz as duas coisas a partir da mesma entrada.
A palavra & quot; insignificant" está a fazer um trabalho real nessa frase Em HTML, alguns espaços em branco são importantes e outros não. A nova linha e dois espaços que você coloca entre um fecho </li> e o próximo <li> não altere nada sobre a página renderizada, portanto, um formatador é livre para adicioná-los, removê-los ou normalizá-los Mas os espaços dentro de um <pre> bloco, ou o único espaço entre dois inline <a> elementos, fazem parte do que o usuário vê Um formatador que não entende essa diferença vai alegremente quebrar seu layout Esta é a linha entre um formatador que ajuda e um que você aprende a desconfiar.
Se você usou Mais bonito no seu editor, você já conhece a sensação: você deixa de se importar com o recuo porque uma ferramenta garante isso Um formatador baseado em navegador lhe dá a mesma garantia para trechos únicos, saída gerada e marcação que você não controla, sem configurar um projeto.
Por que o HTML acaba bagunçado em primeiro lugar?
Ajuda saber de onde vem a bagunça, porque diz o que um formatador tem para sobreviver.
A primeira fonte é a renderização do servidor Um modelo PHP, uma visualização Rails ou um arquivo Blade emite HTML com qualquer espaço em branco que o mecanismo de modelo tenha a sensação de produzir e, após a minificação do middleware, geralmente é uma única linha com milhares de caracteres Quando algo parece errado no navegador e você acerta o & quot; Ver Fonte, & quot; é isso que você obtém.
A segunda fonte é copiar e colar Você pega um componente de um sistema de design, um fragmento de um CMS ou um modelo de e-mail que alguém lhe enviou, e ele carrega qualquer espaçamento que a fonte usou: guias e espaços mistos, aninhamento inconsistente, espaço em branco à direita Eu passo grande parte da minha semana dentro do WordPress e saída CMS sem cabeça, e marcação gerada por CMS é um dos piores, porque é montado a partir de fragmentos que foram formatados de forma diferente cada um.
A terceira fonte é gerado marcação Ferramentas de construção, editores WYSIWYG, e funções de exportação produzir HTML que nunca foi feito para ser lido por um ser humano É correto, mas é opaco Um formatador transforma-lo de volta em algo que você pode auditar.
O fio condutor é que nenhuma dessas fontes se importa se você pode ler o resultado Esse é o seu trabalho, e um formatador é a maneira mais rápida de fazê-lo.
Como faço para formatar HTML online?
O fluxo de trabalho no Toolz.dev leva cerca de dez segundos:
- abra o Formatador HTML e cole sua marcação no painel de entrada Não importa se ela é minificada em uma linha, recuada de forma inconsistente ou em um fragmento nu.
- Escolha Embelezar para expandi-lo ou Minificar para comprimi-lo.
- Para embelezar, escolha seu recuo: 2 espaços, 4 espaços ou guias. Dois espaços é o padrão comum da web.
- Opcionalmente assinale o & quot; Remover os comentários" para retirar os comentários HTML da saída.
- Copie o resultado ou baixe-o como um
.htmlarquivo.
Tudo corre lado do cliente O analisador é JavaScript no seu navegador, então a marcação nunca toca um servidor Isso importa mais do que as pessoas assumem, que EU vou voltar.
Qual é a diferença entre embelezar e minificar?
Estas são operações opostas que compartilham um analisador, e saber quando alcançar cada uma é a maior parte da habilidade.
Embelezar é para humanos Ele adiciona quebras de linha e recuo para que o aninhamento seja visível, que é o que você deseja durante a edição, depuração, diffing duas versões, ou revisão de um pedido pull Quando EU estou caçando um bug de layout, EU embelezo primeiro para que EU possa ver qual elemento é não fechado ou aninhado um nível muito profundo.
Minificar é para máquinas Ele remove o espaço em branco que um navegador ignora para que o arquivo seja menor e mais rápido de transferir Você minifica HTML pelo mesmo motivo que você minifica CSS ou JavaScript: bytes sobre o tempo de custo do fio, e em uma página grande o espaço em branco se você já se apoiar no Minificador de HTML para compactação de produção, o formatador é a ferramenta que você usa para ler essa saída novamente quando algo quebra.
Veja como as duas direções se comparam nas decisões que realmente diferem:
| Aspecto | embelezar | reduzir |
|---|---|---|
| meta | legibilidade | Menor arquivo |
| Espaço em branco entre tags | Adicionado e normalizado | removido |
| Tamanho saída | Maior | Menor |
| Quando usar | Edição, depuração, revisão | Produção, transferência |
| Indentação | 2 espaços, 4 espaços ou guias | nenhum |
| Resultado renderizado | idêntico | idêntico |
A última linha é a importante Nenhuma das operações altera a aparência da página Apenas o espaço em branco que um navegador trata como alterações insignificantes Se um formatador alterar sua saída renderizada, isso é um bug no formatador, não uma propriedade de formatação.
A formatação quebrará meu JavaScript, CSS ou texto pré-formatado?
Esta é a questão que separa um brinquedo de uma ferramenta, e é a razão pela qual sou exigente sobre qual formatador uso.
Certos elementos contêm conteúdo onde espaços em branco e caracteres são significativos e não devem ser tocados. O Padrão HTML WHATWG classifica script e style como elementos de texto bruto e textarea e title como elementos de texto bruto escapáveis Dentro deles, um formatador deve tratar o conteúdo como opaco Se ele tentar reindentar o JavaScript em um script tag, ele pode deslocar o conteúdo de um modelo literal, alterar uma expressão regular ou mover uma linha dentro de uma string de várias linhas, e agora seu código se comporta de maneira diferente Isso não é uma mudança de formatação, isso é um bug que o formatador introduziu.
o pre elemento é um caso relacionado Todo o seu propósito é preservar espaços em branco, de modo que seu conteúdo de texto é exibido exatamente como escrito Um formatador que reindents dentro <pre> muda visivelmente a página.
O formatador Toolz.dev lida com tudo isso tratando script, style, pre, textarea, e title como conteúdo bruto: ele reencontra o HTML ao seu redor, mas copia seu texto interno literalmente Seu código e texto pré-formatado saem idênticos byte por byte Quando testei isso enquanto o construía, a barra de aceitação era simples: a <script> contendo if(a<b){x=1} tem que sobreviver intocado, e ele faz Se você está trabalhando com marcação que contém scripts inline ou estilos, esta é a propriedade para verificar antes de confiar em qualquer formatador.
Um formatador pode lidar com HTML quebrado ou incompleto?
HTML real raramente é bem formado da maneira que o XML é, e um formatador que exige perfeição é inútil Os navegadores são notoriamente tolerantes: o Algoritmo de análise HTML define exatamente como lidar com tags finais omitidas e elementos aninhados, e é por isso que falta uma página </li> ainda renderiza bem Um bom formatador empresta a mesma tolerância.
O caso mais comum são tags finais opcionais HTML permite omitir a tag de fechamento em elementos como li, p, td, tr, e option, porque a especificação diz uma abertura li está implicitamente fechado quando o próximo li começa. Então <ul><li>a<li>b</ul> é válido e o formatador Toolz.dev aplica essas regras de fechamento implícito para produzir <li>a</li> e <li>b</li> em suas próprias linhas, exatamente como um navegador iria construir a árvore A <p> é fechado automaticamente quando um elemento de bloco abre dentro dele, porque um parágrafo não pode conter conteúdo de bloco.
O segundo caso é genuinamente quebrado marcação: uma tag aberta e nunca fechada, ou uma tag de fechamento perdido sem correspondência aberta O formatador fecha qualquer coisa deixada pendurada no final do documento e relata-lo como um aviso, para que você saiba que a entrada estava incompleta em vez de silenciosamente adivinhar Esses avisos são muitas vezes a maneira mais rápida de encontrar o bug exato que você veio para corrigir.
Compare esse comportamento com um formatador estrito e contra fazê-lo manualmente:
| aproximar-se | Tags finais omitidas | Tags não fechadas | apressar |
|---|---|---|---|
| Formatador tolerante (Toolz.dev) | Aplica regras implícitas-fechar | Fecha automaticamente e avisa | instante |
| Formatador estrito estilo XML | Muitas vezes erros fora | Erros fora | Instantâneo quando funciona |
| Reindentação manual | Você mesmo rastreia | Fácil de perder | Lento e propenso a erros |
Eu costumava estar naquela linha inferior, reindentando manualmente e perdendo um não fechado div três vezes em dez A ferramenta tolerante ganha porque a marcação real é confusa e você quer que a bagunça surja, não rejeitada.
Quando devo usar um formatador versus meu editor?
Se você possui o arquivo e ele está em seu projeto, seu editor mais Prettier ou um equivalente é a casa certa para formatação, porque ele é executado em salvar e permanece consistente em toda a equipe Eu não estou sugerindo que você substitua isso.
Um formatador baseado em navegador ganha seu lugar nas lacunas que o fluxo de trabalho deixa Você cola um fragmento de um relatório de bug e precisa lê-lo agora mesmo Você está em uma máquina que não é sua caixa dev Você está olhando para saída CMS, um modelo de e-mail, ou marcação gerada que nunca viveu em um repo Você quer minificar um único snippet sem ligar uma etapa de construção Em todos esses casos, abrir uma guia é mais rápido do que configurar um projeto, e o resultado é o mesmo.
Há também o ângulo de privacidade, que não é uma coisa pequena Porque o analisador Toolz.dev é executado inteiramente em seu navegador, marcação que contém URLs internos, cópia inédita, respostas de API incorporadas em um modelo ou um cliente' s dados nunca sai do seu dispositivo Um monte de formatadores on-line POSTAR sua entrada para um servidor para fazer o trabalho Para qualquer coisa de uma base de código de trabalho, que é uma exposição de dados que você não precisa tomar Eu me importo com isso o suficiente para que seja uma regra de design para cada ferramenta no site, que EU escrevi mais sobre no Kit de ferramentas para desenvolvedores web e o guia para Privacidade de dados em ferramentas online.
Um fluxo de trabalho prático que me poupou horas
Aqui está o loop que EU realmente executo quando um layout está se comportando mal Embelezar a marcação para que o aninhamento seja visível Digitalizar o recuo para o nível que parece errado, porque um recuo extra perdido quase sempre significa uma tag que nunca fechou Leia os avisos do formatador, que frequentemente nomeiam o elemento não fechado exato Corrigir na fonte Se o fragmento é destinado à produção, minify-lo na saída Todo o ciclo é um minuto, e a maior parte desse minuto sou eu lendo, não lutando contra a ferramenta.
O mesmo loop funciona para auditorias de conteúdo Quando EU verificar marcação para acessibilidade ou SEO, EU embelezo primeiro para que EU possa ver a estrutura de cabeçalho e elementos de referência em um relance, então EU puxo peças específicas em outras ferramentas: convertendo um pedaço para Markdown para documentação com o HTML para Markdown conversor, ou gerando uma tabela de comparação com o Gerador de mesa de remarcação. A formatação é a etapa que torna a estrutura legível o suficiente para trabalhar com. Se você quiser a rotina mais ampla em que essas ferramentas se encaixam, o Ferramentas de produtividade do desenvolve guia expõe.
Perguntas frequentes
Como faço para formatar HTML online?
Cole seu HTML no painel de entrada, escolha Embelezar, escolha uma largura de recuo e clique em Formato A ferramenta analisa a árvore de tags e a reencontra, depois permite copiar ou baixar o resultado Todo o processamento acontece no seu navegador, então nada é carregado.
Qual é a diferença entre embelezar e minificar HTML?
Embelezar adiciona quebras de linha e recuo para que o aninhamento seja fácil de ler, o que é ideal para edição e depuração Minificar remove o espaço em branco insignificante entre as tags para produzir um arquivo menor para produção Ambos mantêm o mesmo resultado renderizado; apenas o espaço em branco muda.
A formatação mudará a aparência da minha página?
Não. O formatador altera apenas o espaço em branco entre tags, não os elementos, atributos ou texto. O conteúdo onde o espaço em branco é significativo, como pré, área de texto e texto embutido, é preservado, portanto, uma página renderiza o mesmo antes e depois da formatação.
O formatador reformata meu JavaScript e CSS?
Não. O conteúdo dentro das tags de script e estilo é tratado como texto bruto e copiado literalmente. A ferramenta reencontra o HTML ao seu redor, mas nunca toca o código em si, portanto, literais de modelo, expressões regulares e valores CSS permanecem idênticos byte por byte.
Ele consegue lidar com HTML quebrado ou incompleto?
Sim, dentro do motivo O analisador é tolerante: ele aplica as mesmas regras implícitas-fechando navegadores usam para tags como li, p, e td, e ele auto-fecha tags deixadas abertas no final do documento Quando ele faz, ele mostra um aviso para que você saiba que a marcação estava incompleta.
É seguro formatar HTML que contém dados confidenciais?
Sim. o analisador é executado inteiramente em JavaScript no seu navegador Nenhuma solicitação de rede carrega sua marcação, nada é armazenado e a ferramenta funciona offline uma vez carregada HTML segurando links internos, respostas de API ou cópia inédita nunca sai da sua máquina.
Quais opções de recuo estão disponíveis?
Embelezar saída suporta 2 espaços, 4 espaços ou guias Dois espaços é o padrão comum para projetos web, quatro espaços se adequa às equipes que preferem indentação mais ampla, e as guias permitem que cada desenvolvedor defina sua própria largura de exibição no editor.
Como um formatador HTML é diferente de um minificador HTML?
Um formatador tem ambas as direções em uma ferramenta: embelezar para expandir a marcação para leitura e minimizar para colapsá-la para envio. Um minificador dedicado apenas comprime. Se você precisar principalmente de compactação de produção, o minificador HTML se concentra nisso; se você alternar entre leitura e envio, o formatador cobre ambos.
Formate sua marcação com o grátis Formatador HTML. Ele é executado inteiramente no seu navegador, mantém seus scripts e conteúdo pré-formatado intactos e nunca carrega um byte.
