Formattatore HTML

A cosa serve un formattatore HTML

L’HTML arriva spesso in uno stato difficile da leggere. L’esportazione di un CMS mette un’intera pagina su una riga. Un motore di template lascia buchi strani. Copiare dal codice sorgente nel browser ti dà quello che ha inviato il server, così com’è. Un formattatore HTML ricostruisce l’indentazione in modo che ogni elemento annidato stia un livello più in dentro rispetto al genitore, e la struttura della pagina si vede a colpo d’occhio.

Questa pagina usa Prettier 3 nel tuo browser. Oltre al markup formatta anche il CSS dentro i tag style e il JavaScript dentro i tag script, quindi una pagina completa esce ordinata in un solo passaggio.

Come si usa

1. Incolla l’HTML nel riquadro a sinistra. La formattazione parte appena incolli.
2. In alternativa premi Apri file per caricare un file .html, oppure Esempio per provare con un esempio.
3. Scegli il Rientro: 2 spazi, 4 spazi o tabulazioni.
4. Imposta la Larghezza riga. Le righe con molti attributi o con testo lungo vanno a capo a questa larghezza.
5. Scegli una modalità per gli Spazi bianchi: Rispetta display CSS, Ignora o Rigoroso. Quella predefinita è la più sicura.
6. Premi Formatta o Ctrl+Invio. Premi Minifica per la versione compatta.
7. Premi Copia, oppure Scarica per salvare un file .html.

Dopo il primo avvio, il formattatore aggiorna il risultato mentre scrivi. Se un blocco script o style dentro la pagina ha un errore di sintassi, quel blocco resta com’era e il resto della pagina viene comunque formattato. Per trovare l’errore, incolla lo script nel formattatore JavaScript, che indica riga e colonna.

Prima e dopo

Una riga di HTML:

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

Dopo Formatta con 2 spazi:

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

I due link nel nav restano sulla stessa riga. Nel sorgente non c’è spazio tra loro, e un a capo creerebbe uno spazio visibile. È la modalità Rispetta display CSS al lavoro.

I blocchi incorporati vengono formattati con le loro regole:

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

L’opzione Spazi bianchi

In HTML, un a capo tra due elementi inline viene mostrato come uno spazio. Per questo i formattatori devono stare attenti. Ecco lo stesso paragrafo con una larghezza riga di 40.

Con Rispetta display CSS:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

Con Ignora:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

La seconda versione sembra in ordine, ma ora il browser mostra uno spazio prima della virgola e prima del punto. Usa Ignora solo per markup in cui questo non conta, come template email che controlli a occhio, o HTML simile all’XML senza testo inline.

Minificare l’HTML

Minifica riduce la pagina senza cambiare ciò che mostra. Con questo input:

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

il risultato è:

<div class="card"><p>Only <b>$5</b> today</p></div>

I commenti vengono rimossi, gli spazi ripetuti diventano uno solo e spariscono gli spazi accanto agli elementi di blocco come div e p. Gli spazi tra le parole inline restano, perché toglierli unirebbe le parole. Il contenuto di pre, textarea e script non viene toccato, e il CSS nei tag style viene minificato con le stesse regole prudenti del formattatore CSS.

Limiti

• L’HTML è tollerante, quindi un tag di chiusura mancante spesso non è un errore. L’input <div><p>Hello</div> torna come <div><p>Hello</p></div>, con il paragrafo chiuso al posto tuo. Osserva il risultato per individuare i tag che hai dimenticato.
• La formattazione non convalida gli attributi, non controlla l’accessibilità e non corregge annidamenti non validi. Per questo usa il validatore del W3C.
• Una sintassi di template come Handlebars o Jinja può confondere il parser. Formatta l’HTML già generato, oppure usa un formattatore pensato per quel linguaggio di template.

Altri modi per formattare l’HTML

• VS Code ha un formattatore HTML integrato. Esegui Format Document (Maiusc+Alt+F su Windows, Maiusc+Opzione+F su macOS). L’estensione Prettier dà un risultato identico a quello di questa pagina.
• Riga di comando: npx prettier --write index.html.
• Gli strumenti per sviluppatori del browser mostrano un albero DOM formattato nel pannello Elements, ma è la pagina viva dopo l’esecuzione degli script, non il tuo sorgente.

Se ti serve il contenuto di una pagina in Markdown invece che in HTML, usa il convertitore da HTML a Markdown. Per gli script fuori dalla pagina usa il formattatore JavaScript.