Formattatore e minificatore HTML
HTML Beautifier & Minifier
Formatta o minifica l’HTML, conservando gli elementi in linea e riducendo gli spazi bianchi se glielo chiedi.
Reindenta l’HTML perché una pagina che si è ricevuta sia leggibile, oppure la minifica quando contano i byte. Il tokenizzatore implementa gli stati raw text e RCDATA di WHATWG, che è quello che impedisce a un `</div>` dentro una stringa di script di essere letto come un tag e di mandare a monte tutto quello che segue.
HTML in ingresso
Trascina un file .html
Letto solo in questa scheda. Non viene caricato niente.
HTML formattato
Elementi
20
Nodi di testo
13
Commenti
1
Profondità massima
5
Fin dove arriva
- · Un tokenizzatore scritto a mano legge
<script>e<style>come testo grezzo, e<textarea>e<title>come RCDATA, così che un</div>dentro una stringa non venga scambiato per un tag. - · Niente di ciò che sta dentro
<pre>o<textarea>viene cambiato di un solo carattere;<script>e<style>vengono solo reindentati riga per riga. Il codice che contengono non viene riscritto. - · Gli elementi vuoti come
<br>,<img>e gli elementi il cui tag di chiusura si può omettere —<li>,<p>,<td>— sono trattati come dice la specifica. I tag di chiusura mancanti non vengono aggiunti al posto tuo. - · La minificazione toglie solo commenti, spazi e virgolette non necessarie. Non elimina i tag di chiusura facoltativi e non riordina gli attributi.
- · I tag che non combaciano e gli attributi doppi vengono segnalati con riga e colonna, e il documento viene comunque letto fin dove si riesce — che è quello che fa un browser.
Il CSS che c’è dentro si può ripulire a parte con il Formattatore e minificatore CSS, e gli script con il Formattatore e minificatore JavaScript.
Come si usa
Incollare una pagina o un frammento
Un documento intero con un doctype, oppure un pezzo copiato da un template. Funzionano entrambi; un frammento semplicemente non ha un elemento `html` dentro cui indentare.
Impostare il layout
La larghezza dell’indentazione, se gli attributi vengono normalizzati alle virgolette doppie, la larghezza di riga a cui una lunga lista di attributi va a capo, e se il contenuto di `html`, `head` e `body` viene indentato — molte pagine scritte a mano li lasciano a filo.
Leggere l’elenco dei problemi
I tag che non combaciano e gli attributi duplicati vengono elencati con riga e colonna. Il documento viene comunque formattato — anche il browser lo renderizzerebbe — ma ogni voce è una cosa che vale la pena sistemare.
Oppure minificare per la rete
Escono commenti, spazi bianchi e virgolette di attributo non necessarie. I commenti condizionali e i commenti `<!--!` vengono conservati, e le cifre prima/dopo mostrano che cosa si è guadagnato.
Domande frequenti
Il mio blocco `<pre>` è al sicuro?
Sì. Niente dentro `<pre>` o `<textarea>` viene cambiato di un solo carattere, in nessuna delle due modalità: lì gli spazi bianchi sono contenuto. `<script>` e `<style>` vengono reindentati riga per riga, ma il loro contenuto non viene mai riscritto.
Aggiunge i tag di chiusura che ho lasciato fuori?
No. Li capisce — `<li>`, `<p>` e `<td>` si chiudono implicitamente, e gli elementi vuoti come `<br>` e `<img>` non hanno mai avuto un tag di chiusura — quindi l’albero viene costruito correttamente. Ma scrivere tag che non si sono scritti è una modifica, non una formattazione.
Può formattare un file di template — Jinja, ERB, Handlebars?
Solo fin dove la sintassi del template si comporta come testo. I blocchi `{% if %}` non vengono capiti come struttura, quindi l’indentazione al loro interno sarà sbagliata ovunque un tag si apra in un ramo e si chiuda in un altro. Meglio formattare l’uscita già renderizzata.
Minificare cambierà l’aspetto della pagina?
Lo spazio bianco fra elementi inline in HTML è significativo, e comprimerlo è l’unica impostazione qui che può spostare un pixel: `<span>a</span> <span>b</span>` non è la stessa cosa dei due span attaccati. Se il layout ci conta, va spento Comprimi gli spazi bianchi.
Può ricevere da
Da HTML a Markdown
HTML to Markdown
Converte l’HTML incollato o una pagina salvata in Markdown pulito — titoli, elenchi annidati, tabelle GFM, blocchi di codice — buttando via script e fogli di stile.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Banco di prova per XPath
XPath Tester
Valuta un’espressione XPath o un selettore CSS su XML o HTML ed elenca ogni nodo corrispondente.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Codificatore di entità HTML
HTML Entity Encoder
Applica e toglie l’escape delle entità HTML, con uscita per nome, in decimale e in esadecimale.
Da HTML a Markdown
HTML to Markdown
Converte l’HTML incollato o una pagina salvata in Markdown pulito — titoli, elenchi annidati, tabelle GFM, blocchi di codice — buttando via script e fogli di stile.
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Da curl a codice
curl to Code
Converte un comando curl in fetch, axios, requests di Python, Go, PHP o PowerShell.