Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Come si inseriscono gli spazi in HTML5?

HTML5. Scopriamo come il linguaggio di markup per la pagine Web gestisce gli spazi, e quali entità HTML sono disponibili per il loro rendering.
HTML5. Scopriamo come il linguaggio di markup per la pagine Web gestisce gli spazi, e quali entità HTML sono disponibili per il loro rendering.
Link copiato negli appunti

All'interno di un testo gli spazi sono delle componenti ortografiche che hanno la funzione di separare i termini utilizzati. Per convenzione essi vengono definiti come delle aree vuote o "bianche", cioè prive di contenuto, tra una parola e la successiva; si parla quindi nello specifico di separatori interparola o inter-word separator.

Ma come vengono gestiti tali elementi all'interno di una pagina Web? Volendo rispondere a questa domanda dobbiamo fare riferimento ad HTML, il linguaggio di markup che consente di definire la struttura logica di una pagina Internet.

HTML, spazi vuoti e rendering da browser

In HTML5 il cosiddetto "spazio normale", corrispondente al codice carattere U+0020 della codifica Unicode, non è associato ad alcun valore del linguaggio e viene quindi interpretato come uno spazio vuoto. Quando inserito anche in sequenza in un elemento HTML, tramite la barra spaziatrice della tastiera o con un semplice copia e incolla, viene trattato di default come un separatore interparola.

Un separatore interparola vuoto è per sua natura un elemento singolo, ai fini ortografici non vi è infatti alcuna necessità di separare due termini con più di uno spazio, questo significa che all'interno del testo di una pagina HTML più "spazi normali" verranno ridotti ad uno in fase di rendering, gli altri collasseranno e, anche se presenti nel codice della pagina, non saranno restituiti in output dal browser.

Fanno eccezione i soli spazi vuoti presenti all'interno di contenuti compresi tra i tag <pre>..</pre> che definiscono infatti del testo preformattato e i contenuti delimitati da essi conservano sia gli spazi che le interruzioni di riga (line break).

Spazio HTML e tag, alcuni esempi

Per proporre un esempio a riguardo è possibile inserire la medesima stringa di testo sia tra i tag per la paragrafazione, <p>..</p>, che tra i già citati <pre>..</pre>. Nel primo caso il codice:

<p>Marge, bisogna essere in due per mentire: uno che mente e
l'altro che sente.</p>

restituirà un output di questo tipo dove gli spazi multipli presenti tra i due punti (":") e la successiva lettera "u" vengono ridotti a uno:

Marge, bisogna essere in due per mentire: uno che mente e l'altro che sente.

Nel secondo caso invece, il codice:

<pre>Marge, bisogna essere in due per mentire: uno che mente e
l'altro che sente.</pre>

restituirà:

Marge, bisogna essere in due per mentire: uno che mente e
l'altro che sente.

Da notare che gli spazi vuoti posti al di fuori di <pre>..</pre> non impediscono il naturale generarsi di un ritorno a capo e l'eventuale creazione di una nuova linea in fase di rendering, la disposizione di un contenuto verrà comunque adeguata alle dimensioni della finestra corrente, del contenitore in cui è inserito, delle caratteristiche del font scelto e dello stile CSS applicato.

Più semplicemente gli spazi vuoti non determinano alcun vincolo per la creazione di un line break a partire da un punto specifico di una stringa, per forzare il ritorno a capo HTML prevede invece l'uso del tag <br />.

L'entità HTML &nbsp;

Abbiamo ricordato che gli spazi vuoti consentono lo spezzettamento delle stringhe e il loro eventuale ritorno a capo, vengono inoltre ridotti ad un unico spazio quando digitati in sequenza. Per evitare il verificarsi di tali comportamenti è disponibile l'entità HTML &nbsp; (codice carattere Unicode U+00A0).

Se da una parte uno spazio vuoto rappresenta un elemento di separazione, al contrario &nbsp; è un elemento unificatore, la sottostringa "nbsp" presente nel nome è infatti riferita all'omonimo acronimo NBSP che significa "Non Breakable SPace", letteralmente: spazio non divisibile. Detto questo un singolo &nbsp; costituisce una modalità alternativa per la rappresentazione di uno spazio. 2 &nbsp; genereranno due spazi vuoti visibili via browser, 3 &nbsp; 3 spazi vuoti visibili e così via.

&nbsp; non permette lo spezzettamento delle stringhe, non consente il ritorno a capo e supporta la creazione di sequenze composte da più spazi, questo perché tale entità non collassa mai in fase di rendering.

Un esempio pratico ci aiuterà a comprendere meglio i concetti esposti. Una stringa digitata in questo modo:

Oh, beh, certo che tutto&nbsp;&nbsp;&nbsp;&nbsp;sembra brutto se te lo ricordi!

verrà restituita dal browser nel modo seguente:

Oh, beh, certo che tutto sembra brutto se te lo ricordi!

Una sequenza composta da 4 &nbsp; verrà quindi interpretata sotto forma di 4 spazi vuoti.

Per quanto riguarda il ritorno a capo è sufficiente tenere presente che una stringa posizionata alla fine di una riga che include &nbsp; verrà spostata per intero alla riga successiva quando troppo lunga per quella corrente. In nessun caso potrà invece verificarsi un caso come il seguente:

<!-- stringa -->
Di solito non sono un uomo che prega, ma se tu sei lassù, salvami, Super&nbsp;&nbsp;&nbsp;man!
<!-- output non consentito -->
Di solito non sono un uomo che prega, ma se tu sei lassù, salvami, Super
man!

&nbsp; ed entità HTML alternative

&nbsp; non è l'unica soluzione offerta da HTML per la rappresentazione degli spazi, sono infatti a disposizione anche le entità:

  • &ensp;: genera in output uno spazio maggiore rispetto a &nbsp;, corrispondente a circa il doppio.
  • &emsp;: genera in output uno spazio circa doppio rispetto a &ensp; e quadruplo rispetto a &nbsp;, viene utilizzato generalmente per l'enfatizzazione.
  • &thinsp;:genera in output uno spazio inferiore rispetto a &ensp;

In generale è bene ricordare che l'uso delle entità HTML descritte fino ad ora risulta pratico soltanto per semplici operazioni di distanziamento tra gli elementi di un contenuto. Per procedure più complesse è invece consigliabile il ricorso a costrutti CSS, come per esempio la proprietà text-indent per l'indentazione.

Ti consigliamo anche