Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

ritorno a capo

21 aprile 2011, Scritto da , category HTML

In HTML, per forzare il ritorno a capo in un determinato punto del testo, bisogna utilizzare il tag <br>. Questo tag è “atomico” e non richiede il corrispettivo di chiusura.

Senza questo tag il testo viene scritto tutto di seguito e segue le impostazioni della finestra del browser (in particolare della sua larghezza) per decidere dove andare a capo.

Questo fenomeno avviene perché le pagine HTML sono prive del concetto di “larghezza di pagina” e “margini di pagina”, tipici elementi con cui si ha a che fare quando si scrive un documento di testo finalizzato, in secondo momento, ad essere stampato su carta.

Esempio:

<p>Questo testo va andrà a capo soltanto quando la larghezza 
del paragrafo avrà raggiunto e superato i limiti della 
larghezza della finestra del browser</p>

<p>Questo testo va a capo qui<br> anziché dipendere 
dalla larghezza della finestra del browser</p>

Quanto sopra porterà ad una situazione in cui il primo paragrafo verrà “spezzato” nel punto in cui raggiungerà la larghezza massima della finestra del browser mentre il secondo paragrafo verrà “spezzato” subito dopo la parola “qui”, in questa maniera:

Questo testo va a capo qui<br>
anziché dipendere dalla larghezza della finestra del browser

Si possono usare tanti <br> a piacere per distanziare un contenuto da un altro ma è un approccio un po’ “old school”, superato dall’utilizzo dei tag <p>, <div> e dei fogli di stile.


Un altro modo per interrompere la scrittura e separare due sezioni di contenuto è fornito dall’utilizzo del tag <hr> (che sta per horizontal row) che fa comparire una riga orizzontale larga quanto la larghezza dell’oggetto che la contiene. Ne ho appena usata una subito prima di scrivere quest’ultimo paragrafo.

Gli attributi del tag <hr>, che, così come <br> è atomico e non richiede il corrispettivo tag di chisura, sono i seguenti:

  • width: determina la larghezza della riga orizzontale. Questo valore può essere espresso in pixel o percentuale
  • size: determina l’altezza della riga orizzontale
  • align: serve per allineare la riga
  • noshade: serve per nascondere l’ombreggiatura che altrimenti verrebbe visualizzata di default

Tutti questi attributi sono ormai deprecati a favore dell’utilizzo dei fogli di stile