Beautify codice HTML istantaneamente per contenuti web puliti, leggibili e ben strutturati.
Introduzione
L'HTML preso da un sito già in rete, esportato da un costruttore di pagine o copiato da un modello di email è spesso compresso in poche righe senza nessuna indentazione: tecnicamente valido, ma difficile da leggere per una persona. Formattarlo fa il contrario: ricostruisce le interruzioni di riga e l'indentazione che rendono visibile l'annidamento dei tag, senza cambiare ciò che il codice fa. Questo conta ogni volta che l'obiettivo è leggere o studiare davvero l'HTML e non solo farlo disegnare da un browser — capire com'è strutturata una pagina, controllare il codice consegnato da uno studente, o scoprire perché qualcosa non viene visualizzato bene.
Come questo strumento formatta il tuo codice
Incollare l'HTML e premere «Formatta» lo ricostruisce con un'indentazione di due spazi, un livello di annidamento per tag, così si capisce a prima vista quali elementi stanno dentro quali. Vale la pena sapere un paio di cose su come gestisce l'HTML del mondo reale:
- I commenti vengono mantenuti, non rimossi. I commenti HTML, compresi i commenti condizionali e i blocchi CDATA, passano inalterati — utile se il tuo codice contiene un'attribuzione, delle note da completare o un commento di licenza che devi conservare.
- I blocchi
<script>e<style>vengono riposizionati, non riscritti. La loro indentazione viene adattata al punto in cui si trovano nell'HTML circostante, ma il JavaScript o il CSS al loro interno non viene riformattato per conto proprio. Se il codice dentro un blocco script o style era già disordinato, resta disordinato: solo la sua posizione rispetto all'HTML intorno viene sistemata. Usa JavaScript Beautifier o CSS Beautifier direttamente su quel contenuto interno se gli serve una formattazione a sé.
Cosa sapere prima di usarlo
Questo strumento gestisce bene l'HTML tipico e ben formato. Prima di fidarti del risultato su codice più insolito, vale la pena controllare tre cose precise:
- Alcuni elementi HTML5 a chiusura automatica non vengono riconosciuti come tali. L'elenco dei tag che non hanno bisogno di un tag di chiusura usato da questo strumento, confrontato con l'elenco degli elementi void nella specifica HTML attuale, non comprende alcuni dei più recenti — in particolare
<source>(usato dentro<video>,<audio>e<picture>),<track>(usato dentro<video>per i sottotitoli) e<col>(usato dentro<colgroup>nelle tabelle). Se il tuo HTML usa uno di questi scritto nel modo normale — cioè senza una/>finale esplicita — tutto ciò che segue quel tag può finire indentato di un livello in più, perché lo strumento sta ancora aspettando un tag di chiusura che non arriverà mai. Scrivere questi tag con la barra di chiusura esplicita (<source />) evita il problema. - Non ripara l'HTML rotto. Se un tag del tuo codice originale non viene mai chiuso, o i tag non corrispondono tra loro, questo strumento riformatta la struttura che trova senza bloccarsi, ma non inserisce il tag di chiusura mancante né risolve in altro modo il problema di fondo. Al risultato mancherà ancora tutto ciò che mancava all'ingresso: è un formattatore, non un validatore.
- I tag in linea in mezzo a una frase possono finire su una riga a sé. Tag come
<strong>,<em>o<a>che compaiono dentro un paragrafo di testo corrente possono ritrovarsi su righe separate dalle parole che li circondano, perché questo strumento non li tratta come «da tenere in linea» come fanno certi altri formattatori. Questo non cambia il modo in cui il browser disegna l'HTML — lo spazio tra i tag viene comunque ridotto — ma vale la pena aspettarselo se stai formattando contenuti ricchi di testo con molti tag di stile in linea.
Niente di tutto questo cambia ciò che l'HTML fa davvero quando un browser lo disegna: riguarda solo l'aspetto del codice per chi lo legge direttamente, non come la pagina si presenta.
Quando è lo strumento giusto
- Leggere l'HTML di una pagina in rete per imparare da essa. Guardare il sorgente di un sito o ispezionarlo con gli strumenti per sviluppatori del browser mostra spesso codice compresso o generato automaticamente, con poca struttura: formattarlo rende possibile studiare davvero come è costruita una pagina, un uso di vera competenza digitale che va oltre il formattare il proprio codice.
- Correggere il compito di HTML di uno studente. Il codice incollato tra un editor e l'altro o esportato da un costruttore di pagine a volte perde la formattazione originale; formattarlo prima di leggerlo rende la correzione e il riscontro più rapidi.
- Capire perché un markup non viene visualizzato bene. Un HTML denso e senza formattazione è più difficile da scorrere in cerca di un tag mancante o fuori posto: formattarlo prima di solito rende il problema strutturale più facile da individuare, tenendo presente che questo strumento non ti sistemerà un tag davvero rotto.
Se il tuo HTML fa largo uso di tag <source>, <track> o <col> senza barra di chiusura esplicita, ricontrolla l'indentazione dopo quei tag nel risultato — vedi il limite descritto sopra. Per il markup di una pagina tipica, questo strumento è un modo rapido di ottenere una struttura leggibile senza installare un editor o un'estensione.
Esempio
A uno studente viene chiesto di esaminare la home page di un sito reale e di descrivere come è strutturata nell'HTML la navigazione principale. Il sorgente della pagina mostra un'unica riga densa e minificata, senza alcuna spaziatura. Incollarla in questo strumento e formattarla la trasforma in codice indentato come si deve, e permette di vedere davvero quali elementi <nav>, <ul> e <li> stanno dentro quali, e come la navigazione si rapporta al resto della pagina — il tipo di lettura strutturale che su una singola riga non formattata è molto più difficile.
Domande frequenti
Formattare cambia il modo in cui l'HTML viene visualizzato?
No. Cambiano solo spaziatura e interruzioni di riga — tag, attributi e contenuto restano gli stessi, quindi il browser disegna la pagina in modo identico in entrambi i casi.
I commenti HTML vengono rimossi?
No — i commenti, compresi quelli condizionali, vengono mantenuti così come sono nel risultato.
Anche il CSS o il JavaScript dentro il mio HTML verranno formattati?
Non per conto proprio. I blocchi <script> e <style> vengono riposizionati per adattarsi all'indentazione dell'HTML circostante, ma il codice al loro interno non viene riformattato a sé. Usa JavaScript Beautifier o CSS Beautifier direttamente su quel contenuto se gli serve una formattazione propria.
Sistema i tag rotti o non chiusi?
No. Questo strumento formatta la struttura che trova; non valida l'HTML e non inserisce i tag di chiusura mancanti.
Gestisce correttamente i tag <source>, <track> e <col>?
Non in modo affidabile quando sono scritti senza la barra di chiusura esplicita: il contenuto che li segue può finire indentato di un livello in più. Scriverli come <source /> evita il problema. Vedi «Cosa sapere prima di usarlo» qui sopra.
Il mio codice viene salvato da qualche parte?
No. L'HTML incollato viene elaborato per produrre il risultato formattato e non viene conservato dopo; resta registrato solo il fatto che lo strumento è stato usato, non il codice.
Quali strumenti collegati posso usare?
Usa JavaScript Beautifier o CSS Beautifier per formattare il JavaScript o il CSS dentro il tuo HTML, oppure HTML Minifier per ricomprimere l'HTML finito in vista della pubblicazione.
