Formattare e Minificare HTML - leggibile o compatto

Formattatore e minificatore HTML

Cosa fa questo strumento

Due lavori opposti sullo stesso testo. Formattare aggiunge a capo e indentazione perché una persona segua l’annidamento; minificare toglie tutto ciò che al browser non serve. Qui entrambi agiscono sui caratteri che hai dato, non su un documento ricostruito: ciò che esce è ancora il tuo markup.

Come si usa

  1. 1 Incolla l’HTML: una pagina intera o solo un frammento.
  2. 2 Scegli l’indentazione, poi Formatta o Minifica.
  3. 3 Copia il risultato o passalo dall’altro pulsante per confrontare.

Gli spazi non sono sempre rumore

Tra due elementi inline uno spazio singolo è testo visibile: toglilo e «uno due» diventa «unodue». Tra elementi di blocco lo stesso spazio non significa nulla. Il minificatore qui elimina l’indentazione ma tiene lo spazio separatore dove sta facendo un lavoro vero.

Perché pre e textarea restano intatti

Al loro interno ogni spazio e ogni a capo è contenuto che il lettore vedrà. Reindentare un blocco di codice cambierebbe in silenzio ciò che mostra, e tagliare una textarea cambierebbe il valore inviato dal form. Lo stesso vale per script e style: il loro contenuto è un altro linguaggio e passa intatto.

Formatta, non ripara

Gli strumenti costruiti sul parser del browser riparano in silenzio il markup rotto: chiudono i tag, buttano quelli spaiati e spostano elementi dove la specifica pretende. Mentre fai debug spesso non è ciò che vuoi: il bug che stai inseguendo può essere proprio ciò che è stato riparato. Questo riformatta il testo e lascia gli errori dove puoi vederli.

Minificare l’HTML è la vittoria piccola

Togliere gli spazi da una pagina di solito fa risparmiare qualche punto percentuale, e il gzip sul server avrebbe comunque compresso gran parte di quello. Il peso vero sta in immagini, font e script. Minifica l’HTML perché un generatore di template ha lasciato l’output illeggibile, non perché ti aspetti una pagina molto più veloce.

Formattazione HTML - domande frequenti

La formattazione può, in un caso preciso: aggiungere a capo tra elementi inline introduce uno spazio che non c’era. Se un layout dipende da due span attaccati, formatta il blocco intorno ma lascia stare quella riga. La minificazione è pensata per evitare il rovescio dello stesso problema.
Popolare Oggi
Formattatore YAML Reindenta uno YAML disordinato, trova l’errore con il numero di riga e rileggi il documento come JSON. Mantiene commenti, scalari a blocco e ancore. Funziona nel browser.
Nuovo
Editor Markdown Scrivi in Markdown e guarda il risultato renderizzato fianco a fianco. Titoli, elenchi, tabelle, blocchi di codice e link sono supportati; copia l’HTML o scarica file .md e .html. Funziona nel tuo browser.

Strumenti per sviluppatori correlati

Formattatore JSON Formatta, minifica e valida JSON nel browser. L’errore è indicato per riga e colonna e un albero richiudibile mostra la struttura.
Minificare CSS Comprimi il CSS togliendo commenti e spazi, o riespandilo con un'indentazione pulita. Restano intatti gli spazi di calc(), le stringhe e le licenze.
Formattatore XML Indenta l'XML disordinato per leggerlo, o alleggeriscilo. Gestisce RSS, CDATA e namespace e non riscrive mai il tuo documento.
Formattatore SQL Spezza una query lunga in righe leggibili, o rimettila su una sola. Mantiene le maiuscole, i nomi tra virgolette e le stringhe esattamente come sono.
Minificatore JavaScript Riduci il JavaScript con Terser, il motore degli strumenti di build. Analizza il codice invece di indovinare: il comportamento resta. Nulla viene caricato.

Altri strumenti che potrebbero piacerti

Word in PDF Converti Word in PDF gratis: carica un file DOC, DOCX, ODT o RTF e scarica un PDF ben formattato in pochi secondi, senza filigrana.
PDF in Word Converti PDF in Word gratis: carica un PDF e scarica un DOCX modificabile in pochi secondi - senza registrazione e senza filigrana.
Contatore di parole Contatore di parole gratuito: incolla un testo per contare parole, caratteri, frasi e paragrafi e vedere il tempo di lettura, senza caricare nulla.
Contatore di caratteri Contatore di caratteri gratuito: caratteri con e senza spazi, parole e righe, con i limiti SEO per titoli e meta description.
Verificatore di densità delle parole chiave Analizzatore di densità delle parole chiave gratuito: incolla testo o URL e vedi quante volte ricorre ogni parola o frase, in percentuale.