onlinetools.dev

Formattatore e minificatore HTML

Abbellisci HTML disordinato o minificalo per la produzione

Gira in locale
loading…
Su questo strumento

Abbellisci HTML uscito da un bundler, da uno scraper o da un editor WYSIWYG: gli elementi vengono indentati alla larghezza scelta, gli attributi restano sulla loro riga e il contenuto di pre/textarea rimane intatto byte per byte. La modalità minify elimina i commenti e collassa gli spazi tra i tag — tipicamente un taglio del 10–25% sulle pagine scritte a mano.

La minificazione qui è volutamente conservativa: script e stili inline sono protetti, i commenti condizionali sopravvivono e gli spazi singoli tra elementi inline vengono preservati, così "clicca <a>qui</a> ora" non si fonde in "cliccaquiora". Ottieni un minify sicuro, non il più aggressivo possibile.

Entrambe le operazioni girano in locale nel tuo browser — le pagine non pubblicate e il markup degli admin interni non lasciano mai la tua macchina.

Domande frequenti

Minificare romperà il mio JavaScript o CSS inline?
No — i blocchi <script>, <style>, <pre> e <textarea> sono del tutto esclusi dal collasso degli spazi. Viene toccato solo il markup tra i tag. Per comprimere gli script stessi, passali separatamente dal minificatore JavaScript.
Perché è sicuro rimuovere gli spazi tra i tag?
Per lo più lo è: lo spazio tra elementi a blocco non ha effetto visivo. Tra elementi inline invece sì, ed è per questo che il minificatore collassa le sequenze in un singolo spazio invece di eliminarle. I layout che dipendono dai trucchi con gli spazi tra inline-block sono la rara eccezione da controllare a vista.
Il formatter corregge l’HTML non valido?
Formatta ciò che gli dai senza validare contro la specifica HTML — i tag non chiusi restano non chiusi. I browser perdonano il tag soup, quindi la formattazione ti aiuta comunque a vedere la struttura abbastanza bene da individuare il problema.
Quale larghezza di rientro dovrei usare?
2 spazi è la convenzione prevalente nei codebase web e il default della maggior parte delle style guide dei framework. Scegli 4 se il tuo team si è standardizzato così — la scelta è puramente estetica.
Strumenti correlati