GUIDE PRATICHE · Web e codici
Spazi e rientri HTML: formattare senza sorprese
Scopri quali spazi possono cambiare il risultato della pagina e quali controlli fare dopo aver indentato il codice HTML.
A cura di Puffinmint · Aggiornata il
Perché gli spazi tra tag possono contare
Un rientro può migliorare la lettura del sorgente, ma i nodi di testo restano parte del documento. Non rimuovere automaticamente tutti gli spazi tra tag: tra elementi inline possono separare parole o immagini.
Formatta una copia preservando il testo
Lavora su una copia e formatta soltanto sorgente HTML. Il tool conserva attributi e blocchi pre, script, style, textarea e title; aggiunge o sostituisce spazi tra elementi a blocco. Non converte JSX né controlla la validità del documento.
-
Dati inseriti
<div><p>A <strong>B</strong> C</p></div> -
Passaggi del calcolo
Scegli e applica il metodo
-
Risultato
<div> <p>A <strong>B</strong> C</p> </div>
PROVA IL PASSAGGIO
HTML formatter online
Lavora direttamente in questa guida: carica un esempio, avvia lo strumento e cambia i dati per confrontare il risultato. Il secondo esperimento mette alla prova un caso diverso.
Un esempio riproducibile
Nel frammento con A, un elemento strong e la parola finale, gli spazi intorno a strong separano tre parole. Mantienili. Un blocco pre con righe e spazi iniziali deve invece conservare il contenuto esatto anche quando il contenitore esterno viene indentato.
Conserva uno spazio non separabile
Il secondo esempio contiene uno spazio U+00A0 tra due div. Formatta e copia il risultato: quello spazio deve rimanere. Non viene mostrata un’anteprima HTML e nessuno script viene eseguito.
Risultato
Inserisci i dati per vedere il risultato.
Spazi inline e contenuto del blocco pre
Nel frammento con A, un elemento strong e la parola finale, gli spazi intorno a strong separano tre parole. Mantienili. Un blocco pre con righe e spazi iniziali deve invece conservare il contenuto esatto anche quando il contenitore esterno viene indentato.
Scenario di utilizzo
- Dati inseriti
<div><p>A <strong>B</strong> C</p></div>- Risultato
<div> <p>A <strong>B</strong> C</p> </div>
Verifica il sorgente nel progetto
Confronta il risultato nel progetto, includendo CSS white-space, selettori sensibili ai nodi di testo e test del template. Una formattazione non prova che i tag siano annidati correttamente. Il tool mostra il sorgente come testo e non esegue script o anteprime HTML.
Questi sono dati di esempio, non misure di un caso reale. Il risultato usa lo stesso motore dello strumento completo. Confrontalo con i passaggi spiegati nella guida e spunta le verifiche dopo il controllo.
| Parametro | Valore |
|---|---|
| Quali sono i limiti dello strumento? | Massimo 100.000 caratteri e 10.000 token. Solo HTML; non valida, non converte JSX e può cambiare spazi tra blocchi. |
| Elaborazione e privacy | I dati inseriti e i risultati vengono elaborati nel browser e non sono inviati al server. Le statistiche aggregate, se attive, registrano solo lo strumento e l’esito, senza contenuti. |