Formattatore HTML
Formatta, minimizza e controlla il tuo markup

Cosa fa un formattatore HTML

Un browser non rifiuta mai una pagina. Di conseguenza, un paragrafo non chiuso, un elemento di lista senza tag di chiusura e una cella di tabella lasciata aperta si visualizzano comunque, perché l’analizzatore riempie in silenzio i vuoti mentre legge. Così il markup dietro un sito attivo è di solito più lasco della sorgente che una persona vorrebbe maneggiare.

Proprio per questo divario esiste questo formattatore HTML. Infatti legge il tuo markup con le stesse regole di un browser: chiude i tag lasciati impliciti, corregge l’indentazione, allinea gli attributi e ti restituisce qualcosa di davvero leggibile.

Oltre al riordino, tiene nota di ogni decisione. Così una fine di lista implicita, un elemento vuoto scritto con una barra di chiusura o un tag spaiato senza partner finiscono ciascuno in una tabella dei controlli, con la riga e la colonna dove si trovano.

Non costruisce alcuna pagina e non esegue alcuno script, quindi un blocco di markup copiato dal sito di un cliente viene letto esattamente come il tuo. Inoltre un blocco <script> o <style> viene trasportato intatto, perché il suo contenuto non è HTML e riformattarlo lo romperebbe.

Niente lascia questa scheda, del resto. Così un template sotto NDA, un componente a metà o una pagina che non pubblicheresti mai sono tutti sicuri da incollare.

Come un formattatore HTML legge il tuo markup

La prima passata trasforma il testo in token. Un tag di apertura, un tag di chiusura, una sequenza di testo, un commento e il doctype sono cose diverse, quindi il lettore decide quale sta guardando un carattere alla volta.

La seconda passata dispone poi quei token in un albero, ed è lì che la forma viene controllata. Il regolamento qui è la specifica di parsing HTML del WHATWG, lo stesso documento che segue ogni browser.

L’ordine spiega gran parte di ciò che dice la tabella dei controlli. Perché alcuni tag possono restare aperti di proposito, un nuovo <li> chiude il precedente e una nuova riga chiude l’ultima cella. Così l’albero che il lettore costruisce è più ordinato del testo che gli hai dato.

Tre tipi di elemento ricevono un trattamento speciale. Prima, un elemento vuoto come <br> o <img> non prende mai un tag di chiusura. Poi, un elemento a testo grezzo come <script>, <style> o <textarea> mantiene il suo contenuto alla lettera. Infine, <pre> mantiene i suoi spazi, perché in quell’unico elemento lo spazio è contenuto.

La distinzione tra maiuscole e minuscole è una scelta, non una regola. Per impostazione predefinita il formattatore lascia i nomi di tag e attributi esattamente come sono, così un <svg> in linea mantiene viewBox e linearGradient scritti come l’SVG richiede. Tuttavia, una sola opzione mette tutto in minuscolo quando vuoi lo stile HTML più semplice.

Perché formattare e minimizzare sono lo stesso lettore

Entrambe le modalità leggono il markup allo stesso modo e costruiscono lo stesso albero. Poi una modalità stampa quell’albero su molte righe indentate, e l’altra lo stampa togliendo gli spazi tra i tag.

Così la differenza sta solo nell’ultimo passo. Perché la minimizzazione comprime le sequenze di spazi invece di cancellarle, uno spazio tra due tag in linea viene mantenuto, perché toglierlo incollerebbe due parole sulla pagina.

Quel lettore condiviso è il motivo per cui i controlli sono gli stessi in entrambe le modalità. Infatti un tag di chiusura mancante viene inserito sia che tu stia formattando sia che tu stia minimizzando, e la nota compare in ogni caso.

Quindi formatta quando vuoi leggere o modificare il markup, e minimizza quando vuoi pubblicarlo. Per una pagina che stai per servire, il minificatore HTML dedicato fa la stessa compressione con qualche opzione in più.

I controlli che esegue, e cosa significa ogni nota

La prima nota è un tag di chiusura implicito. Un <li>, un <p> o una riga di tabella può chiudersi da solo, quindi il formattatore inserisce il tag di chiusura e ti dice dove, così l’albero è esplicito anche quando la tua sorgente non lo era.

La seconda è un elemento vuoto scritto con un tag di chiusura. Un </br> o un tag di chiusura su un <img> non significa niente, quindi il lettore lo toglie e annota il punto invece di lasciare una coppia confusa.

La terza è un tag di chiusura senza partner. Quando un tag di chiusura non corrisponde a niente nello stack, il lettore non può accoppiarlo, quindi segnala la riga invece di indovinare quale tag aperto intendevi.

La quarta è un elemento che non si chiude mai. Se un <div> o uno <span> arriva alla fine del file ancora aperto, la nota nomina il tag che l’ha aperto, perché è quello che devi trovare.

La quinta è un attributo duplicato. Due valori class su un tag significano che un browser tiene il primo e ignora il secondo, quindi il lettore indica la coppia prima che cambi in silenzio il tuo stile.

La sesta ferma tutto, ed è l’unica a farlo. Un commento, un doctype o un blocco <script> senza fine corre oltre il bordo del file, quindi il lettore non può finire e niente viene stampato finché non lo chiudi.

Cosa non farà questo formattatore HTML

Non renderizzerà la tua pagina. Niente qui carica un’immagine, esegue uno script o applica un foglio di stile, quindi il markup non può agire sulla scheda mentre lo leggi.

Non convaliderà del tutto il markup. Un formattatore controlla la forma, non il regolamento, quindi un <div> annidato dentro uno <span> o un livello di titolo saltato da due a quattro esce ben indentato e comunque sbagliato. Infatti ordinato non è lo stesso che valido.

Non sistemerà il tuo codice al posto tuo oltre alla forma. Un tag di chiusura indovinato viene inserito e annotato, perché è ciò che richiede la lettura dell’albero; tuttavia, il formattatore non riscrive mai i tuoi attributi né riordina il tuo contenuto.

Non toccherà ciò che non è HTML. Il contenuto di un <script>, di un <style> o di un <pre> viene copiato esattamente, quindi passalo attraverso il validatore JavaScript o il validatore CSS quando vuoi controllare anche quelli.