Perché formattare l’HTML?
L’HTML che trovi in giro raramente è leggibile: pagine minificate su una sola riga, codice esportato da un editor visuale, template copiati da un’email con rientri casuali. Per capire la struttura, trovare un tag non chiuso o modificare una sezione, serve prima rimetterlo in ordine.
Questo strumento usa Prettier, il formattatore più diffuso tra gli sviluppatori web. Riorganizza i tag con un rientro coerente, va a capo quando una riga supera la larghezza scelta e allinea gli attributi lunghi. Formatta anche il CSS dentro i blocchi style e il JavaScript dentro i blocchi script, così il risultato è uniforme in tutto il file.
Puoi scegliere il rientro (2 spazi, 4 spazi o tab) e la larghezza di riga (80, 100 o 120 caratteri), per adattarti alle convenzioni del tuo progetto. La formattazione cambia solo spazi e a capo: il contenuto e la struttura del documento restano gli stessi. Se il codice ha un errore di sintassi, vedi il messaggio del parser.
Un HTML ben indentato rende evidenti gli errori di struttura: un div chiuso nel posto sbagliato o un elenco annidato male saltano subito all’occhio quando ogni livello ha il suo rientro. È anche il modo più rapido per capire come è costruita una pagina di cui vedi solo il sorgente compresso.
Il codice viene formattato nel tuo browser e non viene caricato su un server. La prova gratuita copre un file o un testo incollato, che puoi riformattare con altre opzioni quante volte vuoi. Con ToolStudio Pro hai uso illimitato, più file insieme in uno ZIP e nessuna pubblicità.
Come formattare un file HTML
- Incolla l’HTML nel riquadro oppure trascina o scegli un file.
- Scegli il rientro: 2 spazi, 4 spazi o tab.
- Scegli la larghezza di riga: 80, 100 o 120 caratteri.
- Clicca sul pulsante per formattare.
- Copia il codice formattato o scaricalo.
Quando formattare l’HTML
- Leggere il codice di una pagina minificata.
- Ripulire l’HTML esportato da un page builder o da un editor visuale.
- Rendere modificabile un template di email.
- Uniformare il rientro prima di un commit o di una revisione del codice.
- Trovare tag non chiusi o annidati male.
- Preparare esempi di codice puliti per documentazione o tutorial.
2 spazi, 4 spazi o tab?
Non c’è una scelta giusta in assoluto: conta essere coerenti con il resto del progetto. 2 spazi è la convenzione più diffusa nel front-end (ed è il default di Prettier), perché l’HTML tende ad annidarsi molto e un rientro stretto evita righe troppo lunghe. 4 spazi è comune in progetti che seguono le convenzioni di altri linguaggi. Le tab permettono a ogni sviluppatore di scegliere quanto larghe vederle nel proprio editor.
Domande Frequenti
La formattazione cambia il funzionamento della pagina?
No, cambia solo spazi, rientri e a capo. Prettier tiene conto degli elementi in cui gli spazi contano, come i tag inline e pre.
Formatta anche CSS e JavaScript dentro l’HTML?
Sì, il contenuto dei blocchi style e script viene formattato insieme al resto.
Posso formattare HTML minificato?
Sì, è uno degli usi principali: incolla il codice su una riga e ottieni un HTML indentato e leggibile.
Il codice viene caricato su un server?
No. Prettier viene eseguito nel tuo browser.
È gratis?
La prova gratuita copre un file o un testo incollato, riformattabile con altre opzioni quante volte vuoi. Per nuovo codice serve ToolStudio Pro: uso illimitato, più file insieme in uno ZIP e niente pubblicità, disdicibile quando vuoi.