Come andare a capo in HTML
Sei alle prese con la stesura del tuo primo documento HTML, ma hai notato che premere il tasto Invio della tastiera non ha alcun effetto sul ritorno a capo del testo che stai digitando, il quale continua a essere sempre visualizzato sulla stessa riga? Non preoccuparti, si tratta di un comportamento piuttosto normale: come tutti gli elementi in HTML, anche l’andare a capo richiede l’inserimento di specifici tag, a meno che non vengano usati degli editor in grado di aggiungerli automaticamente (ma in questo caso è l’editor ad aggiungerli).
Tuttavia, se non è questo il tuo caso e stai cercando di creare la tua pagina Web usando il semplice Blocco note di Windows o vuoi solo modificare il codice su un CMS come WordPress, ti tornerà sicuramente utile questa guida, nella quale mi appresto a spiegarti per filo e per segno come andare a capo in HTML. Nello specifico, ti spiegherò la differenza e le modalità d’uso dei più celebri tag che consentono di generare una “interruzione di linea” e, per completezza d’informazione, ti spiegherò anche come dividere parole troppo lunghe, con l’aiuto del linguaggio CSS.
Dunque, senza attendere oltre, mettiti bello comodo e leggi con attenzione tutto quanto ho da spiegarti sull’argomento: sono sicuro che, al termine della lettura di questa guida, avrai perfettamente compreso quali sono i vari tag e gli stili che puoi utilizzare per ottenere il risultato sperato. Buona lettura e buon divertimento!
Indice
Come andare a capo in HTML: tag
Per prima cosa, andiamo a scoprire insieme i più gettonati tag HTML per mandare a capo un testo. Mi raccomando, fai ben attenzione alle modalità e alle condizioni di utilizzo di questi tag: eviterai di compromettere l’estetica della pagina!
<br>
Il tag più semplice ed elementare utilizzabile per andare a capo è <br>, o break line (tradotto in italiano, interruzione di riga). Trattandosi di un tag che non fa altro che andare a capo, è un tag vuoto, ossia senza un elemento di chiusura (a differenza di tanti altri tag HTML). Non è necessario inserirvi degli attributi e per utilizzarlo basta inserirlo dopo l’ultima parola, proprio nel punto in cui si desidera andare a capo.
Il tag può essere annidato in altri tag. Quando si va a capo, non viene inserita nessuna spaziatura automatica. Per farti un esempio, la linea di codice Oggi piove<br>ma domani dovrebbe esserci il sole produrrà il seguente risultato.
Oggi piove
ma domani dovrebbe esserci il sole.
Per andare a capo più volte e dunque lasciare del vuoto rispetto alla riga precedente, è possibile utilizzare più tag <br> consecutivi. Così si ottiene un maggiore spazio tra le due righe, ma la pratica è sconsigliata perché potrebbe sfociare in un’errata formattazione del testo su elementi responsive (quelli che si adattano automaticamente al tipo di schermo su cui vengono visualizzati, es. desktop o mobile), oppure per i software di lettura vocale.
Il tag <br> andrebbe quindi usato solo per andare a capo e non per staccare tra loro elementi della pagina. Per ottenere un maggiore spazio tra due elementi, puoi utilizzare i tag <div> o <p>, che possono anche essere abbinati a degli attributi per regolare la spaziatura in modo capillare (te ne parlerò nei capitoli seguenti). Per maggiori informazioni su altri tag HTML, consulta la mia guida su come creare una pagina HTML.
Ti segnalo che esiste anche il tag <wbr>, una variante introdotta con HTML5. A differenza del <br> che forza sempre ad andare a capo, il <wbr> indica al browser un suggerimento di andare a capo, ma solo se realmente necessario, ad esempio se una parola è troppo lunga per il contenitore in cui il testo è inserito.
Se il tuo testo include stringhe lunghe, come URL o parole composte che potrebbero venire spezzate a causa del layout di una pagina o di uno schermo piccolo, ti consiglio di usare questo tag che consentirà al testo di andare a capo solo se si verificano casistiche del genere.
<hr>
L’acronimo hr sta per horizontal rule e il tag <hr>, oltre ad andare a capo, separa il contenuto ad esso precedente da quello successivo con una riga orizzontale. Il tag è della stessa tipologia di <br>, ossia un elemento vuoto che non prevede alcun tag di chiusura, che si posiziona al termine del contenuto dopo il quale si desidera andare a capo, non inserisce spaziature e si può annidare in altri tag.
Di seguito ti mostro il risultato che puoi ottenere digitando la linea di codice Oggi piove<hr>ma domani dovrebbe esserci il sole.
Oggi piove
ma domani dovrebbe esserci il sole.
In passato, dentro questo elemento potevano essere inseriti degli attributi (ad es. align, color, noshade, size, width e così via) per personalizzare l’aspetto della riga di separazione. Questi attributi sono però stati deprecati e per la personalizzazione della riga è possibile utilizzare il codice CSS, inserendolo dentro il tag. Un esempio è il codice <hr style="border: 6px solid pink;"> che va a creare una riga con spessore di 6 pixel, continua e di colore rosa.
<div>
Il tag <div>, a differenza di quelli visti in precedenza, è un elemento contenitore, pensato per separare tra loro le parti di documento che hanno contenuti sintatticamente o logicamente differenti. Il tag <div> dev’essere necessariamente seguito dal tag di chiusura </div> da posizionare dopo il contenuto da inserire all’interno del contenitore, ed è una sorta di “scatola” contenente altri elementi. In abbinamento con l’attributo class, questo tag può essere usato per definire lo stile estetico degli elementi all’interno.
Dopo che il tag <div> viene chiuso, il contenuto che segue viene inserito su una nuova riga, senza nessuna spaziatura o carattere di separazione. Quindi dopo il tag si va effettivamente a capo. Ecco, per esempio, come il browser interpreta la linea di codice <div>Oggi piove</div><div>ma domani dovrebbe esserci il sole</div> .
Oggi piovema domani dovrebbe esserci il sole
Nel tag <div> si può inserire tutta una serie di attributi per modificare il funzionamento o lo stile estetico degli elementi all’interno: per quest’ultima modifica, si usa generalmente l’attributo class e si usa il linguaggio CSS per specificare la formattazione degli elementi interni.
Anche se consente di andare a capo, non è consigliato utilizzare il tag solo per questo scopo, a meno che non abbia la duplice funzione di definire classi CSS per la formattazione del testo interno oppure di modificarlo in altri modi. Nel caso volessi mettere immagini all’interno di questo tag, puoi servirti della mia guida su come inserire un’immagine in HTML. Se invece vuoi modificare l’allineamento del testo, ti consiglio la mia guida su come giustificare un testo.
<p>
Il tag <p> funziona in modo analogo al tag <div>, tuttavia in un file HTML rappresenta un elemento di tipo paragrafo. Si tratta dunque di un separatore tra paragrafi che può essere utilizzato per andare a capo inserendo un piccolo spazio tra il paragrafo contenuto nel tag e quello successivo (e/o applicando una specifica indentatura al primo rigo dello stesso). Inoltre, si può utilizzare per separare strutturalmente elementi collegati tra di loro in un documento, come ad esempio delle caselle dei moduli.
Il tag di apertura <p> prevede un tag di chiusura </p> e tra i due va inserito il contenuto del paragrafo. Ciò che segue il tag di chiusura, verrà scritto su una nuova riga separata dalla precedente per mezzo di una spaziatura. Ecco l’aspetto finale della linea di codice <p>Oggi piove</p><p>ma domani dovrebbe esserci il sole</p>.
Oggi piove
ma domani dovrebbe esserci il sole
Proprio come il tag <div>, anche il tag <p> supporta gli attributi HTML, inclusi quelli per definire l’aspetto grafico, i margini, l’interlinea, la spaziatura iniziale e finale, e altro. Sono altresì supportati gli elementi CSS per definire l’aspetto grafico del paragrafo e il suo funzionamento.
Tag titoli
Per definizione, HTML prevede ben sei diversi tag, da usare per definire titoli, sottotitoli e ulteriori suddivisioni per gli elementi di un preciso blocco di testo: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Ogni tag prevede un tag di chiusura analogo: all’interno dei due tag va inserito il titolo e il sottotitolo, mentre ciò che viene dopo il tag viene scritto su una nuova riga del documento e separato dal titolo o dal sottotitolo da una spaziatura simile a quella del tag <p>. Dunque questi tag consentono di andare a capo.
I sei tag differiscono tra loro per le dimensioni del testo (il tag <h1> è contraddistinto dal testo più grande, il tag <h6> da quello più piccolo). La formattazione del testo nei titoli e nei sottotitoli può essere gestita tramite gli attributi HTML globali e il CSS.
L’uso di questi tag, però, non va abusato, in quanto potrebbe influire sull’indicizzazione e il posizionamento della pagina ai fini SEO: inserire del testo all’interno di un <hX></hX>, infatti, fa capire ai motori di ricerca che si tratta di un elemento importante della pagina, e inserirne troppi influisce negativamente sull’esperienza utente, dunque anche sulla SEO.
Il tag <h1> dovrebbe essere utilizzato esclusivamente per scrivere il titolo principale e/o il tema portante del testo, i tag <h2> per la suddivisione in capitoli e, se necessario, i tag <h3> per la divisione in sottocapitoli. Cerca di evitare l’uso di più categorie di titoli insieme e l’uso di questi tag per alterare l’aspetto del testo: per quest’ultima operazione, utilizza i tag <div> e <p>, in abbinamento alle classi CSS.
A proposito di CSS, i tag titoli possono essere abbinati ad uno specifico codice nel foglio di stile CSS che serve per evitare che il titolo vada a capo lasciando parole “orfane” in una riga successiva e compromettendo l’aspetto del titolo. Questo codice include la proprietà text-wrap: balance; che ha proprio la suddetta funzione. Un esempio di codice utilizzabile nel foglio di stile è il seguente.
h1 {
text-wrap: balance;
}
Come andare a capo in HTML con CSS
Se hai qualche nozione sulla “programmazione” Web, saprai perfettamente che il linguaggio HTML serve a definire quali sono e come sono disposti gli elementi di una pagina, mentre il linguaggio CSS serve principalmente ad alterare l’estetica (e a volte il comportamento) degli stessi.
Il linguaggio CSS può essere utilizzato sia all’interno del documento con il codice HTML che all’interno di un foglio di stile apposito che serve per definire gli aspetti estetici globali della pagina, con estensione .CSS.
Esiste un caso specifico in cui il CSS può essere utilizzato per andare a capo, ossia quando una parola è troppo lunga e non c’è spazio tra i caratteri che la compongono. Ad esempio, se si inserisce una lunghissima sequenza di lettere in un contenitore dalla dimensione orizzontale fissa, il CSS può essere utilizzato per non far fuoriuscire la stringa al di fuori del box, compromettendo l’estetica della pagina.
Per risolvere questo problema, è sufficiente dichiarare la proprietà overflow-wrap nello stile CSS del contenitore in questione e impostarla sul valore anywhere. Ti faccio un esempio: la riga di codice <p style="overflow-wrap: anywhere;">Supercalifragilistichespiralidoso</p> fa sì che la parola – decisamente lunga – inclusa nel contenitore <p> venga spezzata su una o più righe, quando lo spazio del box è insufficiente a contenerla.
SupercalifragilistichespiralidosoQuestaSimpaticaFilastroccaNonHaSpaziDiProposito
Per maggiori informazioni in merito all’uso dei vari tag e stili all’interno di un documento HTML, oppure sull’uso degli stili CSS, ti rimando alla lettura delle mie guide su come creare una pagina HTML e come creare un sito Web HTML. Per scrivere meglio il codice, puoi servirti dei programmi per HTML di cui ho parlato in una guida dedicata.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e ha curato la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
