back to top

Andare a capo in HTML e inserire linee orizzontali di separazione

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:

Il testo non va a capo nonostante la pressione del tasto Invio

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:

Grazie al tag <br> il testo va a capo correttamente

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:

Aggiungere una maggior spaziatura tra i ritorni a capo

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:

Linea orizzontale in HTML

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.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).