Formattatore HTML: abbellisci e minimizza HTML online gratuitamente

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: il formattatore 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 leggibili. I tag autochiudenti, gli elementi void e gli attributi con namespace (svg:xmlns, xlink:href) vengono 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 browser, quindi puoi incollare in sicurezza modelli di pagine interne, bozze di e-mail o HTML contenente dati privati senza che nulla lasci il 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.

No: HTML Prettify viene eseguito interamente nel tuo browser, quindi ciò che incolli non lascia mai la macchina su cui ti trovi. Ciò è importante se stai controllando qualcosa che contiene un token, una chiave o i dati del cliente. È sufficiente chiudere la scheda per cancellarla.

L'errore punta alla prima posizione che non è stato possibile analizzare, che di solito è subito dopo l'errore reale anziché su di esso: una virgola mancante, una virgoletta o una parentesi non chiusa o una citazione intelligente incollata da un documento anziché da una semplice. Controlla prima la linea sopra la posizione segnalata.

No ad entrambi. HTML Prettify è gratuito, il tuo download non ha filigrana e non ti viene chiesto nulla alla fine: non c'è punto nel flusso in cui finisci il lavoro e poi scopri che costa denaro.

No: Formatta HTML funziona nel browser su computer e telefono. Non devi installare nulla, avviare una prova o acquistare una licenza prima di verificare se fa ciò che ti serve. Provalo sul file con cui sei davvero bloccato, invece che su un esempio.