Formattatore HTML
Indenta un documento HTML senza cambiare come viene visualizzato, interamente nel tuo browser.
Gira interamente nel tuo browser. Non viene caricato, registrato o salvato niente.
Incolla una pagina minificata o indentata male e leggila come si deve. La formattazione avviene nel tuo browser, e il documento che esce viene visualizzato esattamente come quello che è entrato.
Come funziona
Il documento viene letto in un albero — che è dove si risolvono gli elementi vuoti, il contenuto di script e style e i tag di chiusura facoltativi dell'HTML — e poi riscritto con il nuovo rientro.
Dove cadono le righe lo decide come un browser legge gli spazi, non cosa sembra ordinato. Qualsiasi sequenza di spazi viene visualizzata come un solo spazio, quindi trasformare uno spazio in un a capo e un rientro non cambia niente. Crearne uno dove non c'era sì: è quello che trasforma due elementi in linea adiacenti in due separati da uno spazio.
Quindi lo spazio viene aggiunto o tolto solo tra riquadri di blocco e ai bordi di uno, dove un browser non ne visualizza nessuno. È l'eccezione che permette di riaprire una pagina minificata, ed è anche il motivo per cui una sequenza di elementi in linea resta sulla riga in cui stava.
Un tag di cui il formattatore non ha mai sentito parlare viene trattato come in linea, perché è la risposta che non aggiunge spazio e che quindi non può cambiare la pagina.
Esempi
| Caso | Dati inseriti | Risultato |
|---|---|---|
| Un elenco senza indentazione | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Domande frequenti
La mia pagina viene inviata da qualche parte?
No. Il formattatore è JavaScript che gira in questa pagina. Non viene caricato niente, non viene registrato niente e non viene salvato niente: puoi staccare la rete e lo strumento continua a funzionare.
Perché i miei elementi in linea sono rimasti su una riga sola?
Perché spostarli cambierebbe la tua pagina. Lo spazio tra due riquadri in linea viene visualizzato come uno spazio, quindi mettere <span>a</span><span>b</span> su due righe inserisce tra loro un vuoto che non c'era. Quasi tutti i formattatori lo fanno comunque; questo no.
Chiuderà i miei tag non chiusi?
No. Capisce che un secondo elemento di elenco chiude il primo, quindi indenta correttamente la tua lista, ma riscrive i tag che hai scritto tu. Aggiungere un tag di chiusura sarebbe modificare il tuo marcatura invece di impaginarla, e dove andrebbe esattamente non è sempre ovvio.
Valida l'HTML?
No. Non ha schema, né regole su quale elemento possa contenere quale, né opinioni sui tuoi attributi. L'unica cosa che rifiuta è un tag, un commento o un blocco di script che non si chiudono, perché da lì in poi non riesce più a distinguere la marcatura dal testo.
Cosa succede ai miei script e ai miei stili?
Tornano byte per byte. Dentro uno script un < è un segno di minore e non l'inizio di un tag, e dentro un <pre> o un <textarea> ogni spazio è tuo. Quei quattro elementi vengono lasciati esattamente com'erano. Se vuoi formattare lo script o il foglio di stile in sé, il formattatore CSS è qui accanto.
Da sapere
- Il documento che esce viene visualizzato come quello che è entrato. È affermato dai test su un insieme di casi invece di essere lasciato all'occhio.
- Non viene inventato niente: nessun tag di chiusura viene aggiunto, nessun attributo viene rivirgolettato, nessuna entità viene decodificata e nessun nome di tag cambia forma. Cambia solo la spaziatura tra gli attributi, perché non viene mai visualizzata.
- La larghezza di ritorno a capo decide se un elemento con contenuto in linea resta su una riga o si apre, così un paragrafo corto si legge su una riga e uno lungo viene spezzato su spazi che aveva già.