Formattatore e abbellitore HTML gratuito

Cos'è la formattazione HTML?

La formattazione HTML (chiamata anche "abbellimento" o "pretty-printing") è l'inverso della minificazione. Un formattatore prende l'HTML in qualsiasi forma, output di produzione minificato, copia-incollato da un inspector del browser, generato da un motore di template o semplicemente scritto a mano in modo disordinato, e lo riemette con indentazione coerente, interruzioni di riga tra elementi block e una struttura visiva prevedibile. I browser ignorano lo spazio bianco extra in fase di parsing, quindi la formattazione cambia come appare il sorgente ma mai come viene renderizzata la pagina. Perché preoccuparsene? Perché gli occhi umani analizzano la gerarchia indentata più velocemente di un tag soup visivamente piatto. Code review, debugging, apprendimento della struttura HTML, passaggio del markup a un altro sviluppatore, confronto tra due versioni per individuare modifiche, diventano tutti sostanzialmente più semplici quando l'albero del documento è visivamente ovvio dall'indentazione.

I cinque flussi di lavoro reali in cui un formattatore si guadagna il suo posto: (1) HTML di produzione minificato incollato dal "Visualizza sorgente" del browser o dal "Copia outer HTML" di DevTools in un debugger; (2) HTML estratto da una textarea CMS dove l'editor WYSIWYG ha prodotto output visivamente pulito ma sorgente disordinato; (3) debug dell'output del motore di template (Jinja, Twig, Handlebars, ERB) dove l'HTML renderizzato non corrisponde a quello che ti aspettavi; (4) conversione di HTML autogenerato (da rendering server-side React, Pandoc, convertitori di documenti) in una forma leggibile per code review; (5) pulizia di HTML di email template prima di inviarlo a una piattaforma di marketing che potrebbe spogliare la tua formattazione all'importazione.

I principali formattatori HTML

js-beautify (Einar Lielmanis, dal 2007 in poi) è il formattatore di lunga data dell'ecosistema JavaScript, gestisce HTML, CSS, JavaScript e JSON con un'unica libreria. Il formattatore HTML è ciò che alimenta la facciata pubblica di beautifier.io e ciò che storicamente ha supportato decine di siti "formatta HTML online". Prettier (James Long, 2017) è il formattatore con opinioni forti che è arrivato a dominare l'ecosistema frontend moderno; il supporto HTML è arrivato poco dopo il lancio. La filosofia di design di Prettier è "quasi nessuna configurazione", uno stile di indentazione (2 spazi di default), un target di larghezza di riga (printWidth: 80), un set di regole di wrapping degli attributi. Il compromesso è coerenza tra team senza bikeshedding; il costo è meno flessibilità personale. HTML Tidy (Dave Raggett al W3C nel 1997, ora mantenuto da HTACG) è l'originale, precede la scena moderna dei formattatori del web ed è stato originariamente progettato per ripulire HTML vecchio, rotto, deprecato della fine degli anni '90. Tidy continua a essere fornito su macOS di default (/usr/bin/tidy) e sulla maggior parte delle distribuzioni Linux; meno comunemente usato nel 2026 ma ancora rispettato per il suo rigore. In un flusso di lavoro moderno, Prettier è il default per i nuovi progetti, integrato in VS Code (il formattatore predefinito per i file HTML), JetBrains IDEs e hook pre-commit tramite Husky + lint-staged. Questo strumento è per i casi in cui non hai una pipeline di build che esegue Prettier, incolla, formatta, copia.

Convenzioni di indentazione

Tre stili di indentazione si contendono l'HTML moderno. 2 spazi è il default web moderno, usato dalla HTML/CSS Style Guide di GitHub, dalla Google HTML/CSS Style Guide, dal default di Prettier, dagli esempi di stile WHATWG e dalla maggior parte dei pacchetti front-end pubblicati su npm. L'argomento: l'HTML si annida profondamente (un componente tipico potrebbe essere a 6-10 livelli di indentazione), e 2 spazi mantengono le righe lontane dal bordo destro di un display a 80 colonne. 4 spazi è la più vecchia tradizione Java / Microsoft che sopravvive in alcuni progetti legacy e nello standard PHP PSR-12; produce una gerarchia visivamente più chiara al costo di spazio orizzontale. I tab sono favoriti dalla comunità del kernel Linux, da alcuni progetti Go e dagli sviluppatori che sostengono che i caratteri tab permettano a ogni visualizzatore di impostare la propria preferenza di larghezza visiva. L'argomento "tab vs spazi" è più vecchio della maggior parte dei lettori e inconciliabile; la risposta pratica è scegliere uno per progetto e fare in modo che il formattatore lo imponga. Questo strumento offre tutti e tre.

Elementi inline vs block, la trappola dello spazio bianco

La singola fregatura più grande nella formattazione HTML è la distinzione tra elementi block-level e inline. Gli elementi block (<div>, <p>, <section>, <article>, <ul>) fluiscono come blocchi in stile paragrafo; lo spazio bianco tra di essi viene renderizzato come nulla di visibile, quindi un formattatore può aggiungere liberamente interruzioni di riga e indentazione intorno a essi. Gli elementi inline (<span>, <a>, <strong>, <em>, <code>) fluiscono all'interno del testo; lo spazio bianco tra di essi VIENE renderizzato. Considera <p>Hello <strong>world</strong>!</p>: lo spazio tra "Hello" e l'apertura di <strong> è un vero carattere spazio che apparirà tra le parole. Se un formattatore ingenuo spezza quella riga e indenta <strong> sulla sua stessa riga, l'output renderizzato acquista silenziosamente spazio bianco visibile e può ora leggersi come "Hello world" con uno spazio in più. Peggio, i formattatori che rimuovono lo spazio bianco tra elementi inline possono fondere parole adiacenti: "Helloworld" senza spazio. L'opzione "preserva i tag inline" (attiva di default qui) dice al formattatore di mantenere gli elementi inline sulla stessa riga del loro testo circostante, il comportamento sicuro per la maggior parte dell'HTML del mondo reale.

Contenuti protetti, pre, textarea, script, style

Quattro elementi HTML hanno contenuti significativi per lo spazio bianco che non devono essere riformattati: <pre> mostra il testo esattamente come scritto inclusi interruzioni di riga e spazi; <textarea> il contenuto iniziale sopravvive allo spazio bianco; <script> contiene JavaScript la cui semantica dipende dallo spazio bianco (o almeno dove aggiungere indentazione corromperebbe il sorgente); <style> contiene CSS che dovrebbe essere riformattato da un formattatore consapevole del CSS, non da uno HTML. I formattatori HTML di produzione (Prettier, Tidy, js-beautify) rilevano questi elementi e saltano la riformattazione del loro contenuto. Dichiarazione onesta per questo strumento: l'implementazione è scritta a mano piuttosto che avvolgere una libreria di produzione, e la gestione inline-vs-block + contenuti protetti è conservativa ma non perfettamente fault-tolerant. Se fai girare HTML di produzione pesante attraverso di esso e l'output sembra sbagliato all'interno di un blocco <pre> o rompe uno script, l'opzione più sicura è usare Prettier localmente (è un'installazione a un comando: npm install -g prettier, poi prettier --parser html input.html). Per HTML ordinario di template e di livello componente, questo strumento gestisce i casi comuni.

Convenzioni per attributi e tag autochiudenti

Gli attributi HTML hanno le proprie scelte di formattazione. Liste di attributi brevi stanno su una riga (<a href="/about" class="link">); liste lunghe vanno a capo uno per riga, spesso con il > di chiusura sulla propria riga. Il default printWidth: 80 di Prettier attiva il wrapping quando una riga supererebbe gli 80 caratteri, che è la convenzione moderna. Alcuni team impongono un ordine degli attributi (class prima, poi id, poi data-*, poi ARIA, poi gestori di eventi); la maggior parte dei formattatori rispetta l'ordine esistente degli attributi piuttosto che riordinare, poiché il riordino può cambiare il comportamento in casi sottili (specificità CSS, lookup di classi JavaScript). Tag autochiudenti: HTML5 non richiede lo slash finale sugli elementi void (<br>, <hr>, <img>, <input>, <meta>, <link>, ci sono in totale 14 elementi void in HTML5), ma XHTML e JSX sì (<br />). I formattatori preservano lo slash se presente, lo rimuovono (HTML5-pulito), o lo aggiungono (XHTML-friendly) a seconda della configurazione. Questo strumento segue l'input, se il tuo sorgente usa <br />, l'output lo mantiene; se usi <br>, l'output mantiene quello.

Casi d'uso comuni

• Revisione del codice · pulisci l'HTML prima di condividerlo o rivederlo con i colleghi.
• Debug · un codice ben formattato facilita il rilevamento di tag mancanti o di un'annidatura scorretta.
• Pulizia di template · riformatta l'HTML generato da template o strumenti di build.
• Trasmissione tra sviluppatori · rendi il codice più leggibile per gli altri sviluppatori che lavorano sullo stesso progetto.
• Apprendimento · capisci meglio la struttura HTML osservando i pattern di indentazione.
• Ispezione di template email. I costruttori di template email (Mailchimp, ConvertKit) spesso producono HTML con stili inline difficile da leggere; formattarlo rende la struttura visibile prima di inviare modifiche.

La pipeline moderna, Prettier al salvataggio

Per progetti con una pipeline di build, il default del 2026 è Prettier che gira al salvataggio nel tuo editor e a ogni commit tramite un hook pre-commit. VS Code distribuisce Prettier come formattatore HTML predefinito quando l'estensione è installata; attivalo con Format Document (Shift+Alt+F su Windows/Linux, Shift+Option+F su macOS) o abilita "editor.formatOnSave": true nelle impostazioni. Gli IDE JetBrains (WebStorm, IntelliJ) integrano Prettier tramite Impostazioni, Linguaggi e Framework, JavaScript, Prettier. Gli hook pre-commit tramite Husky + lint-staged eseguono Prettier su ogni file in staging prima di permettere il commit, garantendo che nessun HTML non formattato raggiunga il repository. I check CI eseguono prettier --check sulle pull request per catturare la deriva di formattazione. Niente di questo conta per frammenti una tantum incollati da altrove, quello è esattamente ciò per cui è questo strumento in-browser. Per lavoro di progetto a lungo termine, configura Prettier; lo strumento in-browser è l'opzione senza attriti per tutto il resto.

Privacy: perché il solo-browser conta qui

L'HTML spesso contiene cose che non vuoi che una terza parte veda: template di strumenti admin interni, markup di pagine prodotto non ancora rilasciate, varianti di A/B-test con ipotesi di esperimenti rivelate nei nomi delle classi, template email con contenuto personalizzato, dashboard cliente con PII nei placeholder. I formattatori lato server caricano il tuo HTML su un servizio di terze parti dove rimane nei log. Questo strumento gira interamente nel tuo browser tramite JavaScript, verifica nel tab Network di DevTools mentre clicchi Format, o porta la pagina offline (modalità aereo) dopo che si carica e il formattatore funziona ancora. Sicuro per template di prodotti non rilasciati, pagine admin interne, varianti di A/B-test o qualsiasi HTML che non vorresti copiato sull'hard drive di uno sconosciuto.

Domande frequenti

Cos'è l'abbellimento HTML?

L'abbellimento HTML riformatta il tuo codice per renderlo più leggibile aggiungendo un'indentazione e ritorni a capo. Questo facilita molto il debug e la modifica, senza modificare il rendering dell'HTML nei browser.

La formattazione modifica l'aspetto del mio HTML in un browser?

No. La formattazione aggiunge solo spazi e indentazione. I browser ignorano gli spazi superflui in HTML. Il tuo HTML formattato si visualizzerà in modo identico all'originale.

Cosa sono i tag inline?

I tag inline (come <span>, <a>, <strong>) si inseriscono nel testo senza creare un ritorno a capo. L'opzione «conserva i tag inline» impedisce loro di essere posizionati su righe separate e li mantiene con il loro contenuto.

2 spazi, 4 spazi, o tab?

2 spazi è il default web moderno, usato da GitHub, Google HTML/CSS Style Guide, Prettier, gli esempi di stile WHATWG e la maggior parte dei pacchetti npm. 4 spazi persiste nelle tradizioni più vecchie Java / Microsoft / PHP. I tab sono favoriti dal kernel Linux e da alcuni progetti Go. L'argomento è più vecchio della maggior parte dei lettori e inconciliabile; la risposta pratica è abbinare quello che il tuo progetto usa già (o la convenzione prevalente del team) e avere un formattatore che lo imponga. Per un frammento una tantum senza contesto di progetto, 2 spazi è il default più sicuro nel 2026.

Dovrei usare questo se uso già Prettier?

Probabilmente no, l'integrazione Prettier del tuo editor lo sta facendo al salvataggio, con piena consapevolezza dell'AST HTML e la gestione dei contenuti protetti che i formattatori di produzione richiedono. Questo strumento è per i casi che la tua pipeline di build non copre: HTML incollato da un inspector del browser, frammenti da email o chat, output del motore di template che vuoi ispezionare, formattazione una tantum al di fuori di qualsiasi contesto di progetto. Per lavoro di progetto a lungo termine, configura Prettier localmente; per lavoro una tantum senza attriti, questo strumento è la forma giusta.

I miei file HTML vengono caricati?

No. La formattazione gira interamente nel tuo browser tramite JavaScript. L'HTML che incolli non attraversa mai la rete, verifica nel tab Network di DevTools mentre clicchi Format, o porta la pagina offline (modalità aereo) dopo che si carica e lo strumento funziona ancora. Sicuro per template di prodotti non rilasciati, pagine admin interne, varianti di A/B-test, template email con contenuto personalizzato, o qualsiasi HTML che non vorresti copiato sull'hard drive di uno sconosciuto.

Strumenti correlati