Formattatore HTML

Come formattare l’HTML

1. Incolla il tuo HTML, oppure clicca su Apri un file per caricare un file .html o .htm (fino a 10 MB).
2. Scegli l’Indentazione (2 spazi, 4 spazi o una tabulazione) e se vuoi Vai a capo a 80 o 120 caratteri.
3. Spunta Indenta e se vuoi che siano indentati dentro <html>, e Rimuovi i commenti per eliminare i commenti <!-- … -->.
4. Clicca su Formatta (beautify) per avere codice leggibile, oppure su Minifica per la versione sicura più piccola.
5. Copia o scarica il risultato. La riga di stato mostra la dimensione prima e dopo.

Il risultato viene mostrato come testo semplice nella casella di output. Il tuo HTML non viene mai renderizzato né eseguito in questa pagina, quindi gli script presenti nel codice che incolli non possono fare nulla.

Formattare: HTML leggibile e indentato in modo coerente

Formatta (beautify) usa js-beautify, il formattatore alla base di molti editor di codice:

• gli elementi di blocco vanno su righe proprie, indentati secondo il livello di annidamento, mentre gli elementi inline come <a>, <b> o <span> restano dentro il testo;
• il contenuto di <script> e <style> viene formattato come JavaScript e CSS;
• <pre> e <textarea> vengono lasciati esattamente come sono scritti, perché i loro spazi sono visibili;
• le righe vuote consecutive vengono ridotte a una;
• con una larghezza di a capo, le righe di testo lunghe e i lunghi elenchi di attributi vanno a capo.

La formattazione non corregge il markup rotto: un <div> non chiuso resta non chiuso, e l’indentazione che lo segue mostra dove si trova il problema.

Minificare: HTML più leggero senza cambiare la pagina

Minifica segue un approccio volutamente prudente:

• le sequenze di spazi, tabulazioni e a capo nel testo diventano un solo spazio, proprio come le mostra il browser;
• gli spazi accanto agli elementi di blocco e dell’head (<div>, <p>, <li>, <td>, <meta>, <br>…) vengono rimossi, perché non vengono mai visualizzati;
• un singolo spazio tra elementi inline viene mantenuto, così <b>ciao</b> <i>mondo</i> non diventa “ciaomondo”;
• i commenti vengono rimossi quando Rimuovi i commenti è spuntato, tranne i commenti condizionali (<!--[if IE]>) e quelli che iniziano con <!--!;
• il contenuto di <script>, <style>, <pre> e <textarea> non viene mai toccato, e i valori degli attributi restano identici, virgolette comprese.

Non rimuove i tag di chiusura facoltativi, non riscrive gli attributi e non comprime JavaScript e CSS inline: queste ottimizzazioni fanno risparmiare qualcosa in più ma possono rompere le pagine. Per la maggior parte delle pagine, la compressione HTTP (gzip o Brotli) fa risparmiare molto più di qualsiasi minificatore, quindi la minificazione è utile soprattutto per l’HTML incorporato in email, template o stringhe JavaScript.