Come posso indentare HTML disordinato?

Incolla il tuo HTML con l'opzione Beautify selezionata, poi imposta Indent su 2 spazi, 4 spazi o Tabulazioni. L'output si aggiorna mentre scrivi, e puoi copiarlo o scaricare un file .html. Carica esempio mostra un campione.

Può mandare a capo le righe lunghe o formattare CSS e JavaScript inline?

Sì. Nessun a capo offre Nessun a capo, 80 colonne o 120 colonne, e l'opzione Formatta i tag style e script formatta anche il CSS e JavaScript all'interno di quei blocchi. Il contenuto in pre e textarea viene lasciato esattamente come scritto.

Come posso minificare l'HTML per la produzione?

Seleziona Minify. Gli spazi bianchi tra i tag vengono compressi e i commenti vengono rimossi a meno che non spunti Mantieni i commenti. Le caselle opzionali sono Rimuovi le virgolette facoltative, Abbrevia gli attributi booleani e la minificazione di style, script e attributi style incorporati.

La minificazione danneggerà i miei blocchi pre o script?

I contenuti di pre, script, style e textarea sono protetti durante la compressione degli spazi bianchi, e viene mantenuto uno spazio tra elementi inline adiacenti in modo che le parole non si fondano. La minificazione incorporata opzionale si applica solo se la spunti.

Il mio HTML viene inviato a un server?

No. Un tokenizer integrato nella pagina elabora il markup nel tuo browser, quindi template privati e HTML di email rimangono sul tuo dispositivo. Nessuna libreria di formattazione di terze parti viene caricata.

Sì. Ogni strumento è gratuito, senza account e senza carta di credito. L'elaborazione avviene sul tuo dispositivo e non sui nostri server, ed è proprio questo che ci permette di offrirlo gratis.

Sì. Funziona nei browser mobili recenti su iOS e Android, senza installare nulla.

🌐

Abbellitore e Minificatore HTML gratis

Formatta o minifica HTML con corretta indentazione delle sezioni. Preserva il contenuto all'interno dei blocchi <pre>, <script>, <style>.

Funziona nel tuo browserNessuna registrazione, nessun pop-upNessun accesso richiestoGratis per sempre

Funziona offline una volta caricato

Rientro:

A capo:

Formatta <style> e <script>

Trascina qui un file o fai clic per sfogliare

HTML, HTM · elaborato sul tuo dispositivo

oppure premi Ctrl+V per incollare dagli appunti

Sfoglia file

HTML di input

HTML formattato

L'output apparirà qui…

Usi comuni

Esegui il Debug dell'HTML Renderizzato dal ServerVisualizza l'output HTML grezzo dal tuo server (PHP, Rails, Django, Node) in un formato indentato leggibile.
Formatta Modelli HTML EmailL'HTML email è prolisso (tabelle, stili inline). Formatta per renderlo modificabile e mantenibile.
Formatta Pagine HTML StaticheI file HTML statici modificati manualmente beneficiano della formattazione coerente per la modifica collaborativa.
Pulisci l'HTML Esportato da CMSWordPress, Wix, Squarespace esportano HTML con molti artefatti. Formatta per renderlo modificabile.
Minimizza HTML per la ProduzioneRiduci la dimensione del file HTML per caricamenti di pagina più velocemente rimuovendo spazi bianchi e caratteri non necessari.

Come funziona

Questo strumento formatta o comprime l'HTML usando un tokenizzatore consapevole dei tag scritto a mano integrato direttamente nella pagina — nessuna libreria di formattazione di terze parti, nessuna comunicazione con il server. Ogni carattere del tuo markup viene elaborato localmente nel browser nel momento in cui digiti o incolli.

1
Il tokenizzatore scansiona il markup
Uno scanner personalizzato carattere per carattere attraversa la stringa HTML, identificando commenti, dichiarazioni DOCTYPE, tag di apertura, tag di chiusura, elementi void auto-chiudenti (br, img, input, ecc.), e nodi di testo grezzo. Un helper dedicato traccia i valori di attributo tra virgolette così caratteri come > dentro un attributo (ad es. value="a>b") non fanno mai dividere prematuramente un tag.
2
La profondità di indentazione viene tracciata per tag
Per la modalità beautify, il tokenizzatore mantiene un contatore di profondità. I tag di apertura a livello di blocco aumentano la profondità; i tag di chiusura la diminuiscono prima di essere scritti. Gli elementi inline (span, a, strong, em, ecc.) vengono mantenuti sulla stessa riga del loro contenuto invece di essere spinti sulla propria riga indentata. Tag come pre, script, style, e textarea hanno il loro contenuto interno emesso alla lettera per evitare di corrompere codice sensibile agli spazi bianchi o eseguibile.
3
Il minificatore collassa gli spazi bianchi in sicurezza
In modalità minify, il contenuto dei blocchi pre, script, style, e textarea viene scambiato con sentinelle numerate prima che avvenga qualsiasi collasso degli spazi bianchi. I commenti HTML vengono rimossi, e le sequenze di spazi bianchi tra i tag vengono rimosse — eccetto tra elementi inline adiacenti, dove viene preservato un singolo spazio così le parole non si fondono insieme. I segnaposto sentinella vengono poi ripristinati al loro contenuto originale.
4
L'output viene visualizzato e opzionalmente salvato
Il risultato formattato o minificato appare dal vivo nel pannello di output insieme a una percentuale di cambio dimensione. Puoi copiarlo negli appunti o scaricarlo come file .html, tutto senza lasciare il browser.