Trasforma l'HTML disordinato in codice pulito e ben indentato

Incolla qualsiasi HTML — anche output minificato su una sola riga proveniente da una pipeline di build — e lo strumento lo riformatta con i rientri corretti, un tag per riga e spaziatura uniforme. Scegli il rientro da 2, 4 o 8 spazi. L'output è pronto per essere inserito nel tuo editor o incollato in un commento di revisione del codice.

La formattazione espande l'HTML per renderlo leggibile: ogni tag su una riga propria, gli elementi annidati indentati e le righe vuote mantenute tra le sezioni. La minificazione rimuove i commenti, comprime le sequenze di spazi ed elimina le interruzioni di riga così che il file occupi meno byte. Usa la formattazione per modificare e rivedere, la minificazione per il rilascio in produzione.

No — js-beautify (il motore sottostante) rileva i blocchi script e style e ne formatta il contenuto con le regole JS o CSS appropriate, così gli script inline restano validi e i fogli di stile restano leggibili. Tag autochiudenti, elementi void e attributi con namespace (svg:xmlns, xlink:href) sono tutti gestiti correttamente.

Gestisce bene l'HTML semplice e i template simili all'HTML, ma il JSX puro (espressioni tra parentesi graffe, frammenti, tag di componenti con iniziale maiuscola) viene interpretato come HTML e potrebbe presentare piccoli problemi estetici. Per il codice specifico di un framework consigliamo Prettier configurato per il tuo dialetto; per HTML grezzo, file .htm e file template il nostro strumento è perfetto.

Non avviene alcun caricamento. Il formattatore funziona interamente nel tuo browser con js-beautify, così puoi incollare in tutta sicurezza modelli di pagine interne, bozze di email o HTML contenenti dati privati senza che nulla lasci il tuo dispositivo.

La minificazione rimuove i commenti HTML, riduce qualsiasi sequenza di spazi tra i tag a un singolo spazio ed elimina le interruzioni di riga. Il risultato è un HTML che produce un rendering identico byte per byte ma che è in genere più piccolo del 10-30%. Combinata con gzip sul server, questa operazione riduce sensibilmente il peso iniziale delle pagine ricche di contenuti.

Sì: clicca su Scarica per salvare il risultato formattato come output.html o quello minificato come output.min.html. Il file è codificato in UTF-8, quindi funziona allo stesso modo con contenuti in inglese, cirillico, CJK e da destra a sinistra.

È una piccola utility che funziona solo nel browser — costo di hosting pari a zero — quindi la offriamo gratuitamente come parte del nostro toolkit per sviluppatori. Niente pubblicità, nessun tracciamento sull'output, nessun limite alla dimensione dei file oltre a ciò che il tuo browser può mantenere in memoria.

La modalità Prettify ti permette di scegliere un'indentazione di 2, 4 o 8 spazi. Scegli la larghezza usata dal tuo editor o dal tuo stile di codice, poi copia il risultato o scaricalo come output.html così la formattazione passa direttamente nel tuo progetto.

Il selettore di indentazione (2, 4 o 8 spazi) si applica solo in modalità Prettify, poiché Minify rimuove per progettazione tutti gli spazi bianchi e le interruzioni di riga — non c'è nulla da indentare. Torna a Prettify per vedere di nuovo l'effetto della larghezza di indentazione.

Mentre incolli o modifichi, lo strumento esegue automaticamente un controllo strutturale ed elenca eventuali tag non chiusi, non corrispondenti o di chiusura orfani direttamente sotto il pannello di output — senza bisogno di un pulsante a parte. Un messaggio verde «Nessun problema strutturale rilevato» conferma che il markup è ben formato.

Usa la modalità Prettify con indentazione a 2 spazi — è la convenzione più diffusa e mantiene i diff compatti — poi controlla il pannello dei problemi strutturali per verificare che non sia rimasto un tag non chiuso. Dopo la revisione, passa alla modalità Minify prima del rilascio in produzione per rimuovere gli spazi bianchi in eccesso.

Sì — trascina un file .html, .htm o .xhtml sull'area di caricamento, oppure cliccala per sfogliare, e il suo contenuto viene caricato direttamente nel riquadro di input esattamente come se lo avessi incollato. Da lì, Prettify, Minify, la larghezza del rientro e il controllo strutturale funzionano tutti in modo identico, che il markup provenga da un file o da un incolla.

Sì — una volta che c'è un output, accanto al pannello di output e all'area dell'azione principale compare un pulsante Copia. Cliccandolo copia istantaneamente negli appunti il risultato Prettify o Minify corrente (mostra brevemente 'Copied!' come conferma), così puoi incollare direttamente nel tuo editor o in un commento di revisione del codice senza salvare un file .html intermedio.