Formattatore HTML
Abbellisci HTML disordinato, oppure minificalo per la produzione.
Funziona nel browser. Quello che scrivi non viene inviato da nessuna parte.
- Indentazione a 2 o 4 spazi
- Minifica con un clic
- Niente viene caricato
Come formattare HTML
- Incolla il tuo HTML.
- Scegli una dimensione di indentazione, oppure attiva minifica.
- Copia o scarica il risultato.
Abbellire e minificare a confronto
| Abbellisci | Minifica | |
|---|---|---|
| Indentazione | Aggiunge 2, 4 o 8 spazi | La rimuove |
| Commenti | Mantenuti | Rimossi |
| Spazio bianco tra i tag | Normalizzato | Rimosso |
| Contenuto in pre, textarea, script, style | Invariato | Invariato |
Dove conta l'HTML minificato
- Una pagina in produzione si carica un po' più in fretta e usa meno banda una volta rimossi spazio bianco e commenti.
- Il markup minificato è più difficile da leggere nel view-source, un compromesso ragionevole in produzione ma uno svantaggio durante il debug.
Consigli per formattare HTML
- Mantieni una copia leggibile e indentata nel controllo di versione e minifica solo ciò che distribuisci, perché fare debug del markup minificato a occhio è lento.
- L'indentazione a 2 spazi è adatta al markup profondamente annidato, mentre quella a 4 spazi è più facile da scorrere su pagine semplici e poco annidate.
Cosa influisce e cosa non influisce l'indentazione
- Non cambia mai ciò che il browser mostra, perché lo spazio bianco tra i tag di livello blocco collassa comunque.
- Può spostare visibilmente la spaziatura tra elementi inline come <span>, se un design si basa su uno spazio bianco esatto in quel punto. Controlla quei punti dopo la formattazione.
- Non ha alcun effetto sul comportamento di JavaScript, perché la struttura del DOM della pagina resta la stessa in entrambi i casi.
Domande su Formattatore HTML
Cosa fa la minifica qui?
Rimuove i commenti e lo spazio bianco tra i tag, senza toccare il testo o gli attributi dentro i tag pre, textarea, script e style.
La formattazione cambierà l'aspetto della mia pagina?
No. L'indentazione e la spaziatura tra i tag non influiscono sulla resa grafica, quindi la pagina appare uguale prima e dopo.
Corregge i tag rotti o non chiusi?
No. Riformatta l'HTML che gli fornisci. Correggi prima i tag mancanti o non corrispondenti nel tuo editor.
Posso formattare un intero documento HTML?
Sì, incluso doctype, head e body. I documenti molto lunghi possono richiedere qualche istante per essere formattati.
Valida il mio HTML?
No. Riformatta o minifica qualsiasi markup gli fornisci, e non controlla testo alternativo mancante, tag non chiusi o altri problemi di validazione.
Vengono riformattati anche i tag style e script inline?
Sì, durante l'abbellimento. Il formattatore indenta il CSS dentro un tag style e il JavaScript dentro un tag script insieme al markup circostante.
La minifica rimuove i commenti usati da un sistema di template?
I commenti HTML standard (<!-- ... -->) vengono sempre rimossi, compresi quelli che un sistema di template potrebbe usare come marcatori. Se i tuoi commenti hanno un significato altrove, usa solo la formattazione e salta la minifica.
Posso formattare solo un frammento, senza un documento completo?
Sì. Un frammento di pochi tag si formatta allo stesso modo di una pagina intera. Non ha bisogno di un doctype, head o body per funzionare.