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 forma como minha página é renderizada?

Em quase todos os casos, não: o formatador altera o espaço em branco, não elementos ou texto, e o conteúdo pré e textarea é mantido exatamente Existem três casos de borda Execuções de espaços dentro de texto e valores de atributos colapsam para um espaço Embelezar pode mover elementos inline adjacentes, como a b em linhas separadas quando compartilham um pai com um elemento de bloco, o que adiciona um espaço visível entre eles E texto estilizado com espaço em branco CSS: pre fora de uma tag pre perde seu espaçamento Verifique esses pontos após a formatação.

Ele reformata o JavaScript dentro das tags também?

Não. O conteúdo dentro das tags de script e estilo é tratado como texto bruto: a ferramenta reencontra o HTML ao seu redor, mas não reenvia ou reescreve o código, portanto, literais de modelo, expressões regulares e valores CSS mantêm seus caracteres. A única mudança é que as linhas em branco iniciais e os espaços em branco finais dentro da tag sejam cortados. Se você precisar do próprio JavaScript formatado, execute-o em um formatador JavaScript separadamente.

O formatador recarrega tags quebradas ou não fechadas?

Sim, dentro do motivo O analisador aplica as regras implícitas-fechamento navegadores usam para tags como li, p e td, fecha tags abertas quando um pai fecha, e auto-fecha qualquer coisa ainda aberta no final do documento, em seguida, re-indenta o resultado Cada reparo aparece como um aviso como "Documento terminou com 1 tag não fechada (s); eles foram auto-fechado" Uma tag de fechamento com nenhum abridor correspondente é descartado com um aviso "Stray fechamento tag ignorado", então leia os avisos antes de substituir o original.

É 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.

Este formatador HTML é gratuito?

Sim, é gratuito, sem inscrição Cada clique Format ou Minify conta para um limite de uso diário por ferramenta, 10 por dia como convidado e 50 por dia com uma conta gratuita A contagem registra apenas o modo e as opções que você escolheu, nunca a marcação que você colou.

Por que os nomes das tags ou o espaçamento de atributos mudaram após a formatação?

O formatador normaliza as tags à medida que as reconstrói Os nomes das tags são minúsculos, então torna-se , enquanto os nomes dos atributos mantêm seu caso O espaço em branco entre os atributos colapsa para um único espaço, assim como uma série de espaços dentro de um valor de atributo citado, então title="ab" torna-se title="ab". Os navegadores tratam os nomes das tags da mesma forma em qualquer caso, mas um valor de atributo onde o espaçamento exato importa deve ser verificado.

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.

Formatador HTML

Formatar, embelezar e minificar HTML on-line Re-indenta marcação confusa ou minificada, mantém script, estilo e pré-conteúdo literalmente e é executado inteiramente em seu navegador.

HTML Input

Indent:

Remove comments

O que é um HTML Formatter?

Um formatador HTML reescreve a marcação HTML com recuo limpo e consistente para que a estrutura do documento seja fácil de ler Cole uma página minificada, um trecho copiado de uma ferramenta de compilação ou marcação escrita à mão com guias e espaços incompatíveis, e o formatador analisa a árvore de tags e a imprime de volta com um nível de recuo por profundidade de aninhamento A operação inversa, minificando, retira o espaço em branco insignificante entre as tags para reduzir o arquivo para produção sem alterar a forma como o navegador o renderiza.

HTML bruto raramente chega em um estado que você pode digitalizar Os modelos de servidor emitem-no em uma única linha, os empacotadores colapsam-no e os fragmentos colados carregam qualquer espaçamento que a fonte usou Embelezar expõe o aninhamento para que você possa encontrar o elemento que precisa, localizar uma tag que nunca foi fechada ou diff duas versões de forma limpa Isso importa mais quando você está depurando um layout, auditando a marcação para acessibilidade ou lendo o conteúdo de outra pessoa pela primeira vez Um formatador transforma uma parede de colchetes angulares em um contorno que você pode seguir.

Um exemplo trabalhado mostra o que este formatador HTML gratuito faz com entrada desleixada Cole <ul>PH1__One<li>Two</ul>Hi there, mantenha o Beautify e 2 espaços selecionados e clique em Formato O formatador HTML online fecha os itens da lista e o parágrafo, coloca cada li em sua própria linha recuada e mantém Hi there<li>0___ em uma linha porque é conteúdo inline curto. A saída lê 5 tags, 5 linhas, 63 bytes e duas listas de avisos que foram fechadas automaticamente, de modo que o formatador de código HTML nunca repara silenciosamente a marcação quebrada.

Esta ferramenta é executada 100% no seu navegador com um analisador livre de dependência, então nada do que você colar é carregado ou registrado, e ele continua funcionando offline uma vez que a página tenha carregado O analisador é deliberadamente tolerante: ele aplica as mesmas regras implícitas-fechamento que um navegador usa para tags como li, p, td e opção, então marcação do mundo real com tags finais omitidas ainda formata corretamente Conteúdo dentro do script, estilo, pre, textarea e título é copiado literalmente, o que significa que seu JavaScript, CSS e texto pré-formatado nunca são reindentados ou quebrados.

Como usar o Formatador HTML?

Cole seu HTML
Cole qualquer HTML no painel de entrada, seja ele minificado em uma linha, recuado de forma inconsistente ou um fragmento copiado de um modelo Clique em Carregar amostra para começar a partir de uma pequena página realista.
Escolha embelezar ou minificar
Escolha Embelezar para re-indentar a marcação para leitura e edição, ou Minify para colapsá-lo para a menor forma livre de espaços em branco para produção.
Defina o recuo e as opções
Selecione 2 espaços, 4 espaços ou guias para embelezar a saída e, opcionalmente, remova os comentários HTML O documento é analisado primeiro, portanto, as tags não fechadas são relatadas como avisos.
Copie ou baixe o resultado
Copie o HTML formatado para sua área de transferência ou baixe-o como um arquivo.html e, em seguida, coloque-o em seu editor, modelo ou página.

Principais características

embelezar e minificar
Re-indent HTML com recuo de 2 espaços, 4 espaços ou tabulações para legibilidade, ou minify-lo para o menor formulário livre de espaços em branco, ambos da mesma ferramenta.
Analisador Tolerante
Aplica as regras de fechamento implícito do navegador para tags como li, p, td e opção, portanto, a marcação com tags finais omitidas ainda formata corretamente em vez de quebrar.
Roteiro e Estilo Preservado
O conteúdo dentro do script, estilo, pré, área de texto e título é copiado literalmente, portanto, seu JavaScript, CSS e texto pré-formatado nunca são reindentados ou alterados.
Saída Consciente Inline
Parágrafos curtos e inline são executados como um, forte e em permanecem em uma linha em vez de serem divididos tag por tag, então o resultado lê a maneira como você o escreveria.

Frequently Asked Questions

Cole o HTML no painel Entrada HTML, escolha Embelezar, escolha 2 espaços, 4 espaços ou Tab e clique em Formatar A ferramenta analisa a árvore de tags e a reencontra, mesmo quando a entrada é uma única linha minificada, então permite copiar o resultado ou baixá-lo como formatado.html. Todo o processamento acontece no seu navegador, para que a marcação não seja carregada.

Related Tools

HTG

docs

HTML Table Generator

Generate an accessible HTML table from pasted CSV or tab-separated data. Add a header row, caption, striped rows, and borders, then copy the HTML and CSS. Runs client-side.

HTM

docs

HTML to Markdown

Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. Runs client-side.

MTG

docs

Markdown Table Generator

Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM

MTH

docs

Markdown to HTML

Convert Markdown to clean, semantic HTML with GitHub Flavored Markdown support - tables, task lists, fenced code, heading anchors, live preview and a full HTML document export.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

html formatterhtml beautifierbeautify htmlformat htmlhtml minifierhtml pretty printindent htmlhtml formatter onlineclean up htmlhtml formatter freeonline html formatterhtml code formatter

saiba mais

Leia o guia completo de Formatador HTML

Command Palette

Formatador HTML

O que é um HTML Formatter?

Como usar o Formatador HTML?

Cole seu HTML

Escolha embelezar ou minificar

Defina o recuo e as opções

Copie ou baixe o resultado

Principais características

embelezar e minificar

Analisador Tolerante

Roteiro e Estilo Preservado

Saída Consciente Inline

Frequently Asked Questions

Related Tools

HTML Table Generator

HTML to Markdown

Markdown Table Generator

Markdown to HTML

Comments

saiba mais