Come mettere lo spazio con l’HTML?

Ci sono dettagli che fanno la differenza con il codice HTML. Ad esempio, tu sai come gestire gli spazi bianchi tra parole e blocchi di testo? Ecco come usare le entità, i tag e non solo.

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.

spazio HTML
Come creare spazio in HTML?

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.

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: &nbsp

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 operativoCombinazione tasti
LinuxAltGr+Spazio
Microsoft WindowsAlt+0160 o Alt+255
macOSOpt+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 <br> 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

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here