Come usare il formattatore HTML
- Incolla il tuo HTML nella casella di input: una pagina intera, un template o un frammento copiato dagli strumenti per sviluppatori del browser.
- Fai clic su Formatta per indentare il markup in modo che ogni elemento annidato stia su una riga a sé.
- Fai clic su Minifica per eliminare commenti e spazi superflui e ottenere un file più piccolo.
- Copia il risultato nel tuo editor o nel tuo CMS.
Il formattatore funziona interamente nel tuo browser. Il tuo markup non viene caricato né memorizzato e viene trattato come testo: nulla di ciò che incolli viene eseguito.
Perché formattare l'HTML?
L'HTML prodotto da page builder, editor di email, esportazioni di CMS e strumenti di build è spesso minificato o indentato male. Per i browser non è un problema, ma rende la struttura difficile da seguire per le persone. L'HTML formattato mostra chiaramente l'albero del documento, così puoi vedere dove si chiude ogni <div>, trovare un elemento fuori posto e rivedere le modifiche in un diff.
La minificazione funziona al contrario. Rimuovere commenti, indentazione e a capo rende il file più piccolo, riducendo leggermente le dimensioni del trasferimento. Sulla maggior parte dei siti la compressione del server (gzip o Brotli) riduce già molto l'HTML, quindi minificare dà un guadagno aggiuntivo minore, ma resta comune nelle build di produzione.
Problemi HTML comuni e come risolverli
I browser sono tolleranti: l'algoritmo di parsing dell'HTML si riprende dalla maggior parte degli errori invece di fallire. È comodo, ma significa che un markup errato spesso viene visualizzato «quasi giusto» e causa bug di layout difficili da capire. La formattazione rende questi problemi più facili da vedere.
Elementi non chiusi. Quando l'indentazione continua a spostarsi verso destra e non torna più indietro, probabilmente un elemento non è stato chiuso:
<div class="card">
<div class="card-body">
<p>Hello
</div>L'unico </div> chiude card-body (e termina implicitamente il paragrafo), quindi il card esterno resta aperto e inghiotte tutto ciò che segue. Chiudi ogni elemento in modo esplicito:
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Elementi blocco dentro elementi inline o dentro <p>. Un <div> dentro un <p> non è consentito: il browser chiude il paragrafo in anticipo e il tuo CSS smette di applicarsi come previsto.
Tag annidati in modo errato. <b><i>text</b></i> dovrebbe essere <b><i>text</i></b>. Gli elementi interni devono chiudersi prima di quelli esterni.
ID duplicati. Un id deve essere univoco nel documento. I duplicati rompono getElementById, le associazioni delle etichette e le ancore interne alla pagina.
Elementi void e spazi
Alcuni elementi non possono mai avere contenuto e non hanno tag di chiusura. Questi elementi void sono:
| Elementi void |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
In HTML, <br> e <br /> sono equivalenti; la barra finale è facoltativa. Scrivere </br> o <img></img> è un errore.
Gli spazi tra elementi inline possono essere visibili. Due pulsanti inline-block separati da un a capo mostrano un piccolo spazio, mentre gli stessi pulsanti sulla stessa riga no. Un buon formattatore preserva esattamente il contenuto di <pre> e <textarea>, ma se il layout cambia leggermente dopo la formattazione o la minificazione, la causa abituale sono gli spazi inline.
Consigli e buone pratiche
- Indenta con due spazi; con quattro l'HTML molto annidato diventa larghissimo.
- Tieni i grandi blocchi inline
<style>e<script>in file separati e riordinali con il formattatore e minificatore CSS e il formattatore e minificatore JavaScript. - Minifica come parte della build, non a mano, così il sorgente leggibile resta nel controllo di versione.
- Dopo il rilascio, controlla la SEO on-page della pagina con l'analisi SEO e il suo tempo di caricamento con il test velocità sito web.
Domande frequenti
Formattare cambia l'aspetto della mia pagina?
Di solito no. Aggiungere indentazione tra elementi blocco non ha effetti visibili. Gli spazi tra elementi inline possono creare o eliminare piccoli vuoti, quindi controlla dopo la formattazione le pagine con layout inline molto serrati.
Questo è un validatore HTML?
No. Reindenta e minifica il markup ma non lo verifica rispetto alla specifica HTML. La formattazione, però, rende molti errori strutturali facili da individuare a occhio.
L'HTML minificato è migliore per la SEO?
I motori di ricerca leggono allo stesso modo l'HTML minificato e quello formattato. La minificazione può rendere le pagine un po' più piccole, il che aiuta un poco le prestazioni, ma contenuto, struttura e velocità contano molto più degli spazi.
Posso formattare i template HTML per le email?
Sì. L'HTML delle email spesso si basa su tabelle annidate e stili inline, e la formattazione lo rende molto più facile da modificare. Poi prova il risultato nella tua piattaforma di email, perché alcuni client di posta sono sensibili agli spazi.
Aggiornato