pressione ⌘K para trocar de ferramenta
FORMAT & CONVERT

Formatador HTML

Formata código HTML com indentação adequada.

local
html-format
§01 SOBRE ESTA FERRAMENTA

Visão geral

Esta ferramenta imprime HTML de forma legível com o js-beautify, o mesmo motor por trás de muitas extensões de editor. Os elementos aninhados são indentados em dois espaços por nível, as tags ficam em linhas sensatas e as linhas em branco que você já tinha são mantidas. Ela não quebra linhas longas, então tags com muitos atributos permanecem intactas. É útil para ler o código-fonte de páginas minificadas, arrumar a saída de um CMS ou de templates de e-mail e normalizar a marcação antes do diff de uma revisão de código.

Como usar

  1. Cole sua marcação no campo HTML — entrada minificada ou em uma única linha funciona bem.
  2. O resultado embelezado aparece no campo Formatted na hora, conforme você digita.
  3. Copie a saída do campo somente leitura.

Exemplos

  • <div><p>hello</p><span>world</span></div>

    <div>
      <p>hello</p>
      <span>world</span>
    </div>
    

Observações

Isto é um formatador, não um validador: tags não fechadas ou mal aninhadas são indentadas em regime de melhor esforço, sem avisos. Blocos <script> e <style> embutidos são indentados junto com o documento. Para HTML sensível a espaço em branco (layouts com inline-block, conteúdo de <pre>), confira a renderização depois de formatar.

FAQ
Meu HTML é enviado para um servidor?
Não. A formatação roda inteiramente no seu navegador, com a biblioteca js-beautify. Marcação que contenha dados de clientes, IDs de rastreamento ou páginas não publicadas nunca sai da sua máquina.
A formatação muda a renderização da página?
Quase nunca, mas não é rigorosamente nunca. O espaço em branco do HTML é em geral colapsado pelos navegadores, então reindentar é seguro para marcação típica. Contextos sensíveis a espaço em branco — elementos inline separados por espaços, ou o conteúdo de pre e textarea — podem ser afetados por qualquer reformatador, então compare o diff da saída nessas páginas.
Quais são as configurações de formatação?
Padrões fixos: indentação de dois espaços, sem quebra de linha forçada (linhas longas continuam longas) e as linhas em branco já existentes entre blocos são preservadas.