Come abbiamo detto nella lezione precedente, normalmente, in HTML i blocchi di testo sono racchiusi all’interno dei tag <p> e <div> i quali, per loro stessa natura, producono un ritorno a capo (in quanto elementi di tipo block-level) generando uno spazio vuoto (ovviamente la presenza o meno di questo spazio e la sua dimensione sono regolabili attraverso i CSS, ma questo è un altro discorso).
All’interno dei paragrafi di testo o dei DIV, tuttavia, è possibile avere la necessità di andare a capo senza dover necessariamente chiudere il tag contenitore. Altre volte, invece, la semplice chiusura di un paragrafo o di un DIV non è sufficiente a creare la giusta separazione dei contenuti e si rende necessario introdurre un ulteriore elemento di separazione.
In questa lezione della nostra guida HTML vedremo come far fronte a queste necessità, cioè come andare a capo in HTML (senza creare un nuovo paragrafo) e come creare linee orizzontali di separazione.
Andare a capo in HTML
Per andare a capo in HTML non è sufficiente, come faremmo con un normale editor di testo come Word, andare a capo premendo il tasto Invio… i ritorni a capo "fisici", infatti, non vengono rappresentati all’interno di un documento HTML, quindi se all’interno del nostro editor digitiamo:
<p>
Questa è una linea di testo...
Qui vorrei andare a capo...
Qui vorrei andare a capo...
Qui finisce il testo.
<p>e salviamo come HTML, una volta aperto il file nel browser il risultato sarebbe questo:
Come possiamo vedere non c’è nessun ritorno a capo all’interno del nostro paragrafo di testo (la stessa cosa, ovviamente, sarebbe capitata se avessimo usato un DIV invece di un paragrafo).
All’interno di questi elementi, infatti, è possibile mandare a capo il testo solo utilizzando un apposito tag attraverso il quale creare un’interruzione di linea. Tale tag in questione è <br> (break-line) e genera, appunto, un ritorno a capo semplice senza lo "spazio vuoto" che si avrebbe chiudendo il paragrafo o il DIV.
Il tag <br> è un tag vuoto, cioè non ha un suo corrispettivo tag di chiusura (in XHTML si scrive inserendo una slash prima del simbolo maggiore, così: <br/>)
Vediamo, quindi, un esempio di come andare a capo in HTML all’interno di un paragrafo di testo:
<p>
Questa è una linea di testo...<br>
Qui vorrei andare a capo...<br>
Qui vorrei andare a capo...<br>
Qui finisce il testo.
<p>A questo punto il risultato sarà questo:
L’inserimento del tag <br> produce un ritorno a capo semplice. Se vogliamo "aumentare il respiro" del testo ed aggiungere una linea vuota dopo il ritorno a capo sarà sufficiente chiudere il paragrafo (</p>) ed aprirne uno nuovo, oppure – più semplicemente – inserire un doppio <br>:
<p>
Questa è una linea di testo...<br>
Qui vorrei andare a capo...<br>
Qui vorrei andare a capo e lasciare un po' di spazio...<br><br>
Qui finisce il testo.
<p>Il risultato sarà il seguente:
Inserire linee orizzontali di separazione
Un altro tag interessante, spesso utilizzato quale separatore di vari elementi di testo della pagina, è il tag <hr> il quale produce una linea orizzontale che funge appunto da linea di separazione. Come <br>, anche il tag <hr> è un tag vuoto.
Normalmente il tag <hr> è utilizzato come separatore netto, cioè per identificare visivamente un cambio di argomento o per dividere elementi tra loro disomogenei. Vediamo un esempio:
<h2>Primo argomento</h2>
<p>...<p>
<hr>
<h2>Secondo argomento</h2>
<p>...<p>Questo il risultato prodotto a video:
Il tag <hr> supporta una serie di attributi (oggi deprecati a favore dell’utilizzo dei CSS):
- width – è utilizzato per specificare la larghezza della linea (accetta valori in pixel o percentuale);
- size – è utilizzato per specificare l’altezza (o lo spessore) della linea (accetta valori in pixel);
- align – è utilizzato per specificare l’allineamento della linea orizzontale (left, center, right);
- noshade – se utilizzato la linea avrà un "colore piatto" senza alcun effetto ombreggiato.
L’aspetto della linea orizzontale varia da browser a browser in base alle specifiche di default impostate da ciascuno. Ovviamente è possibile uniformare l’aspetto delle linee orizzontali agendo sui fogli di stile CSS.
