Di Riccardo Esposito | Pubblicato il - Aggiornato il
Per mettere lo spazio HTML puoi usare il tag   che permette di lasciare la dimensione simile a quella di una barra spaziatrice sulla tastiera. Poi ci sono anche altri modi per formattare il testo online e per creare spazi tra le parole.
Inserire lo spazio HTML è una necessità importante, spesso però usiamo metodi errati. Ho già scritto un articolo dedicato ai principali tag HTML ma questo linguaggio di markup nasconde sempre nuove sorprese. Soprattutto con la versione HTML5.
Gestire gli spazi tra due termini vuol dire aggiungere un’area bianca, separatori interparola. Anche se la soluzione può essere semplice, spesso la barra spaziatrice non restituisce il risultato sperato. Motivo? Devi imparare a gestire gli spazi in HTML.
Indice dei contenuti
Come fare lo spazio vuoto HTML tra parole
Il modo più semplice per mettere lo spazio in HTML: usa il tasto della barra spaziatrice. Si esegue il già citato separatore interparola che corrisponde al numero Unicode U+0020 con un valore pari a uno spazio nullo, vuoto. Singolo.
Caratteristica decisiva: lo spazio interparola non necessità di particolari esigenze. Si tratta di un singolo elemento di separazione, come suggeriscono le esigenze della buona ortografia, e non impone regole rispetto alla separazione delle parole divise dallo spazio.
Per intenderci, una singola separazione con barra spaziatrice può consentire a due parole di separarsi se si va a capo. Poi non consente di inserire uno spazio superiore.
Da leggere: quali sono le principali regole HTML
Il codice HTML per fare lo spazio:  
Un’entità nel codice HTML per creare distanza tra parole è lo spazio unificatore che risponde a Unicode U+00A0. La caratteristica del carattere spazio vuoto? In primo luogo non può essere interrotto andando a capo.
Due parole separate da uno spazio unificatore rimangono unite in qualsiasi caso. Questo è importante quando dividere le parole potrebbe essere di disturbo.
Così puoi aggiungere uno spazio non divisibile.Inoltre con il tag puoi inserire più spazi tra una parola e l’altra e il browser li mostrerà. Perché questo elemento non viene visto come uno spazio vuoto da rimuovere se supera il singolo elemento: viene codificato come spazio bianco. Ecco come inserire lo spazio bianco HTML con le varie scorciatoie di tastiera.
| Sistema operativo | Combinazione tasti |
|---|---|
| Linux | AltGr+Spazio |
| Microsoft Windows | Alt+0160 o Alt+255 |
| macOS | Opt+Spazio |
Per creare spazi aggiuntivi prima, dopo o tra il testo usa più perché è una funzione cumulativa. Puoi mettere diversi tag per avere più spazi tra parole. Inoltre puoi usare alcune varianti per modificare lo spazio tra due o più termini in un testo:
-   è uno spazio HTML doppio.
-   si usa per uno spazio pari a 4 tab.
-   aggiunge uno spazio inferiore a  
Anche questi sono elementi cumulativi, come . A proposito, il nome di quest’entità indica la sua funzione: nbsp sta per l’acronimo Non Breakable SPace. Ovvero spazio non separabile. Poi come ogni entità HTML troviamo la e commerciale.
Copia/incolla spazio HTML su WordPress
Copiando il testo su WordPress, spesso, viene presa la formattazione invece dello spazio vuoto. Tutto ciò può creare diversi problemi di layout su mobile.
Questo soprattutto se collega due parole lunghe, perché il browser la vede come una parola unica. Soluzione: aggiungere regola CSS word-wrap: break-word;.
Tabulazione HTML per lo spazio a sinistra
Una semplice attenzione: se vuoi aggiungere un po’ di spazio extra a sinistra, magari per indentare il contenuto nel momento in cui c’è una citazione, puoi usare il tag <p> del codice HTML con l’attributo CSS noto ai webmaster come padding.
<p style="padding-left: 40px;">Sono testo spostato a destra.</a>Piccolo problema: con WordPress Gutenberg questa funzione manca, è disponibile solo per le liste puntate che necessitano di indentature. Se vuoi mettere lo spazio HTML per la tabulazione devi usare l’editor HTML o il blocco Classic Editor.
Ancora un dettaglio per la buona formattazione. Come far iniziare la prima riga del testo con un’indentatura verso destra? Basta usare la proprietà CSS text-indent.
Da leggere: come inserire link MAILTO
Fare gli spazi in HTML tra blocchi di testo
Per aggiungere una linea orizzontale tra due blocchi di testo basta semplicemente creare due paragrafi. Quest’operazione avviene in automatico sui principali editor cliccando il tasto Enter della tastiera. Il risultato nel codice HTML sarà questo:
<p>Questo è un blocco di testo</p>Per creare una linea orizzontale di separazione, e non solo uno spazio bianco, puoi usare il tag HTML <hr> tra i paragrafi che crea una vera e propria divisione grafica.
<p>Questo è un blocco di testo</p>
<hr>
<p>Questo è un altro blocco di testo</p>Come si va a capo in HTML? Basta usare il tag HTML
ma così non lasci una riga vuota, porti solo il testo verso il basso. Per aumentare lo spazio e creare una linea verticale spesso si aggiungono più <br> di fila ma non è il massimo.
Per lavorare nel miglior modo possibile con WordPress Gutenberg puoi utilizzare il blocco spazio che consente anche di regolare e salvare il modello in modo da avere una riga vuota HTML standard e di altezza variabile quando e come preferisci.
Fonti utili e riferimenti per approfondire
- Spazio vuoto (punteggiatura) su Wikipedia
- Significato dello spazio unificatore
- Come andare a capo con l’HTML
Categoria: Guide per webmaster | Tag: Codice HTML