Formattare HTML online
Trasforma il sorgente compresso di una pagina in markup leggibile. I tag vengono indentati secondo la profondità di annidamento, gli attributi sono disposti in modo ordinato e gli script e gli stili incorporati vengono formattati insieme al documento.
Perché il codice sorgente ha questo aspetto
I minificatori HTML comprimono gli spazi tra i tag, rimuovono i commenti, eliminano i tag di chiusura facoltativi e tolgono le virgolette dai valori degli attributi che possono farne a meno. Anche la generazione delle pagine sul server contribuisce a questa presentazione: una pagina assemblata da decine di frammenti arriva come un flusso unico che non riflette più i file di origine. Aprendo il sorgente di un sito in produzione puoi trovare un documento composto da poche righe enormi, dove individuare il tag di chiusura di una sezione significa contare a occhio le parentesi angolari.
Il vantaggio è vedere la struttura
HTML è un albero, e un albero è difficile da leggere quando viene appiattito. Indentare secondo la profondità di annidamento mostra subito la forma del documento: dove termina l'intestazione, quale contenitore racchiude il contenuto principale, a quale livello si trova un componente e dove esaminare un annidamento inatteso. Un sorgente formattato è quindi utile per controllare l'ordine dei titoli, esaminare il codice generato da un framework o capire come un altro sito ha strutturato una sezione interessante. L'evidenziazione della sintassi e i numeri di riga completano la lettura, permettendo di indicare un passaggio preciso quando discuti un problema di HTML con un'altra persona.
Anche gli script e gli stili incorporati
Una pagina reale non è quasi mai solo markup. Frammenti di analytics, dati strutturati JSON-LD, oggetti di configurazione e CSS critico sono incorporati direttamente nel documento, e un minificatore comprime anche quelli. Il formattatore tratta ogni blocco incorporato con l'analizzatore giusto: un tag script che contiene JavaScript minificato ne esce come JavaScript leggibile, un tag style ne esce come CSS leggibile, il tutto all'interno di un documento indentato correttamente.
I tag sensibili agli spazi richiedono attenzione
Gli spazi possono influire sulla visualizzazione dell'HTML, soprattutto intorno al testo e in elementi come pre o textarea. Il formattatore considera le regole di sensibilità agli spazi, ma non conosce tutti i fogli di stile o i vincoli della pagina. Un'indentazione piacevole da leggere non garantisce quindi una visualizzazione identica nell'applicazione. Conserva una copia dell'originale e confronta i passaggi sensibili prima di riutilizzare il risultato. Per esaminare una pagina dinamica, distingui anche il sorgente ricevuto dal server dal DOM modificato in seguito dagli script: formattare l'uno non ricostruisce automaticamente l'altro.
Domande frequenti
Posso incollare il sorgente di un'intera pagina?
Sì. Copia il sorgente mostrato dal browser oppure apri un file HTML salvato sul dispositivo. Il formattatore esamina il documento fornito, con intestazione, corpo e blocchi incorporati riconosciuti. Non recupera le risorse esterne e non ricostruisce le modifiche apportate successivamente da JavaScript.
La formattazione cambia l'aspetto della pagina?
Il formattatore tiene conto degli spazi significativi, ma non conosce tutti gli stili dell'applicazione. In alcuni casi l'aspetto può quindi cambiare. Conserva una copia del documento iniziale e controlla le zone sensibili, soprattutto testi ed elementi in linea, prima di riutilizzare il risultato.
Funziona con i template Twig o Blade?
Lo strumento è pensato soprattutto per l'HTML ricevuto dal browser. Le direttive Twig o Blade possono interferire con l'analisi oppure essere conservate senza un trattamento specifico. Per esaminare il codice generato, incolla l'HTML prodotto dall'applicazione. Per formattare i template sorgenti, usa strumenti adatti al motore di template del progetto.