Perché alcuni tag restano sulla stessa riga?

Perché separarli cambierebbe la pagina. ` a b ` si vede «ab»; metti un a capo tra i due e il browser mostra «a b». Lo spazio tra due elementi in linea è contenuto: per questo il formattatore indenta attorno agli elementi di blocco e lascia stare le sequenze in linea. Il minificatore HTML di questo sito applica la stessa regola al contrario.

Il mio blocco ` ` viene reindentato?

No. Dentro un ` ` ogni spazio e ogni a capo è mostrato com’è scritto, quindi toccarli riscriverebbe ciò che vedono i tuoi visitatori. Lo stesso vale per ` `, il cui contenuto è il valore del campo, e per ` ` e ` `, il cui contenuto non è HTML.

Ripara l’HTML rotto?

No: è un formattatore, non un validatore né uno strumento di riparazione. ` x ` torna indentato con il ` ` ancora aperto: lo strumento impagina ciò che legge invece di indovinare che cosa volevi dire. Un risultato ordinato non dice nulla su come il documento verrà analizzato.

Formattatore HTML — leggi il sorgente di una pagina

Reindenta HTML. Gli elementi inline tengono la loro riga, perché un a capo tra loro è uno spazio a schermo: il sorgente si legge e la pagina non si muove.

Istantaneo Privato Zero cookie

Indentazione

Input HTML

Output HTML

Che cosa fa questo strumento

HTML minificato o indentato male diventa HTML leggibile.

<ul><li>a</li><li>b</li></ul>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

Un livello di indentazione per livello di annidamento, due spazi per impostazione predefinita e quattro se preferisci. Nomi dei tag, attributi e loro ordine non vengono toccati: questa è impaginazione, non riscrittura.

Un a capo non è gratis

<p>Ciao <b>mondo</b> di nuovo</p>

Questo resta su una riga. In HTML lo spazio tra due elementi in linea fa parte del testo: spezza la riga tra </b> e di e hai aggiunto uno spazio — visibile nel rendering, in una selezione, in un copia e incolla. Il formattatore quindi indenta attorno agli elementi di blocco (div, p, ul, table…) e lascia intatte le sequenze di contenuto in linea, per quanto lunghe diventino.

È la stessa regola che il minificatore HTML applica nell’altro verso, e per lo stesso motivo: niente che cambi la pagina resa conta come formattazione.

Che cosa non tocca mai

<pre> e <textarea>. I loro spazi sono mostrati esattamente come scritti — reindentarli riscriverebbe la pagina e il valore del campo.
<script> e <style>. Il loro contenuto è JavaScript e CSS, non HTML; per quello ci sono i formattatori JavaScript e CSS di questo sito.
I tuoi attributi. Nomi, valori, virgolette e ordine escono come sono entrati, spazi dentro un valore compresi.

Non è un validatore

<div><p>x</div>

<div>
  <p>x
</div>

Il <p> non chiuso torna non chiuso. Un formattatore legge il documento che gli dai e lo impagina; indovinare dove un tag dovesse chiudersi sarebbe riscrivere il tuo markup a intuito. Per sapere se un documento è ben formato, usa un validatore — quello del W3C — o gli strumenti per sviluppatori del browser, che mostrano l’albero che l’analizzatore ha davvero costruito.

Privato per progettazione

Tutto viene eseguito localmente nel browser con JavaScript. I tuoi dati non vengono mai caricati, quindi lo strumento è sicuro per contenuti sensibili e funziona anche offline.

Domande frequenti

Perché alcuni tag restano sulla stessa riga?: Perché separarli cambierebbe la pagina. `<span>a</span><span>b</span>` si vede «ab»; metti un a capo tra i due e il browser mostra «a b». Lo spazio tra due elementi in linea è contenuto: per questo il formattatore indenta attorno agli elementi di blocco e lascia stare le sequenze in linea. Il minificatore HTML di questo sito applica la stessa regola al contrario.
Il mio blocco `<pre>` viene reindentato?: No. Dentro un `<pre>` ogni spazio e ogni a capo è mostrato com’è scritto, quindi toccarli riscriverebbe ciò che vedono i tuoi visitatori. Lo stesso vale per `<textarea>`, il cui contenuto è il valore del campo, e per `<script>` e `<style>`, il cui contenuto non è HTML.
Ripara l’HTML rotto?: No: è un formattatore, non un validatore né uno strumento di riparazione. `<div><p>x</div>` torna indentato con il `<p>` ancora aperto: lo strumento impagina ciò che legge invece di indovinare che cosa volevi dire. Un risultato ordinato non dice nulla su come il documento verrà analizzato.