Come si usa
- Incolla l'HTML nella casella di input, apri un file .html oppure prova l'esempio.
- Scegli Formatta per un markup indentato e leggibile oppure Minifica per un output compatto.
- Durante la formattazione, scegli 2 spazi, 4 spazi o tabulazioni e decidi se mantenere i commenti.
- Copia il risultato o scaricalo come file .html.
Come funziona
Il formattatore legge l'HTML con un tokenizer permissivo, proprio come fa un browser, e lo riscrive. Non esegue mai il rendering dell'input, quindi gli script nel codice incollato non possono essere eseguiti e nulla viene caricato dal web.
La modalità Beautify mette ogni elemento di blocco (div, p, ul, li, section, table, …) su una propria riga, indentato in base alla profondità di annidamento. Il testo e gli elementi inline come a, b, em, span, code, img e br restano insieme sulla stessa riga, così gli spazi tra parole e link non vengono modificati in modo da alterare la pagina visualizzata. Sequenze di spazi e interruzioni di riga nel testo diventano un singolo spazio, che è comunque il modo in cui i browser le mostrano.
Il contenuto degli elementi pre, textarea, script e style viene copiato esattamente come scritto, inclusi gli spazi bianchi e qualsiasi carattere < o >. Gli elementi void come br, img, input, meta e link non ricevono mai un tag di chiusura. I tag auto-chiudenti come <path /> in SVG inline vengono mantenuti auto-chiudenti.
Minify comprime gli spazi bianchi nel testo in singoli spazi, rimuove gli spazi bianchi accanto agli elementi di blocco, normalizza gli spazi tra gli attributi e, se l'opzione “Keep comments” è disattivata, rimuove i commenti. I commenti condizionali vengono sempre mantenuti.
Lo strumento non corregge HTML non valido, non aggiunge tag mancanti, non riordina gli attributi e non minifica il CSS e il JavaScript all'interno degli elementi style e script. Gli elementi lasciati aperti vengono chiusi alla fine del loro genitore, e un tag di chiusura senza un tag di apertura corrispondente viene mantenuto come scritto.
Esempi
Lettura del markup generato
Un CMS genera un template come un'unica lunga riga. La modalità Beautify con 2 spazi mostra la nav, le voci di elenco e il contenuto principale come un albero indentato, mentre “Prices include <strong>VAT</strong>.” rimane su una riga leggibile.
Preparazione di un template email
Minifica un'email HTML con i commenti disattivati per ridurne le dimensioni. Un blocco <pre> con una tabella dei prezzi e il <style> inline vengono lasciati esattamente come erano.
Verifica della struttura
Quando manca un tag di chiusura </div>, l'output di Beautify mostra gli elementi successivi indentati un livello troppo in profondità, il che rende facile vedere dove l'elemento avrebbe dovuto terminare.
Domande frequenti
La formattazione cambia l'aspetto della mia pagina?
Nella quasi totalità dei casi no. Gli spazi bianchi all'interno degli elementi blocco vengono compressi e trasformati in interruzioni di riga, che i browser ignorano. Testo ed elementi inline restano sulla stessa riga e pre, textarea, script e style non vengono modificati. Fanno eccezione le pagine che usano CSS white-space: pre su elementi normali.
Minifica il CSS e il JavaScript presenti nella pagina?
No. Il contenuto di script e style viene mantenuto esattamente com'è, quindi non può rompersi. Usa il formattatore CSS per minificare un foglio di stile separatamente.
È sicuro incollare HTML da una fonte sconosciuta?
Sì. L'input viene trattato esclusivamente come testo e non viene mai inserito nella pagina, quindi i suoi script non vengono eseguiti e le immagini o i link non vengono caricati.
Valida il mio HTML?
No. È volutamente tollerante e formatta il markup non valido invece di rifiutarlo. I tag di chiusura non corrispondenti vengono mantenuti, così l'indentazione aiuta a individuarli, ma non viene prodotto alcun elenco di errori.
Privacy
Il tuo HTML viene elaborato solo nel tuo browser e non viene mai visualizzato né caricato. Niente viene archiviato o incluso nelle analisi.