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 il “vai a capo” richiede l’inserimento di specifici tag, a meno che non vengano usati degli editor in grado di aggiungerli automaticamente.
Tuttavia, se non è questo il tuo caso e stai cercando di creare la tua pagina Web usando il semplice Blocco note di Windows, 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 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 tag o gli stili che dovresti usare per ottenere il risultato sperato. Buona lettura e buon divertimento!
Indice
Come andare a capo in HTML: tag
Per prima cosa, lascia che ti elenchi i più usati tag HTML che consentono di mandare a capo un testo: presta bene attenzione alle modalità e alle condizioni d’uso ideali, ne va della resa estetica della pagina!
<br>
Il più elementare tag HTML che puoi usare per andare a capo è <br>, o break line (interruzione di riga, in italiano). Si tratta di un tag vuoto, cioè che non prevede un elemento di chiusura, non necessita di attributi e va posizionato al termine dell’ultima parola dopo la quale si intende andare a capo.
Questo tag può essere annidato di altri tag e ha come effetto quello di inserire le parole successive su una nuova riga, senza alcuna spaziatura rispetto a quella precedente. 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.
Al bisogno, è comunque possibile usare più elementi <br> consecutivi, per aumentare la spaziatura, ma si tratta di una pratica sconsigliata, che potrebbe avere come conseguenza un’errata formattazione del testo su elementi responsive (quelli che si adattano automaticamente alla modalità di visualizzazione, ad es. se da desktop o da mobile), oppure per i software di lettura vocale.
Per questo motivo, il tag <br> dovrebbe essere usato soltanto per separare frasi, periodi o concetti in modo puramente visuale (ad es. per distinguere le strofe di una poesia), ma non per staccare tra loro elementi della pagina strutturalmente diversi. Se intendi ottenere questo risultato, ti consiglio di usare invece i tag <div> o <p>.
<hr>
L’acronimo hr sta per horizontal rule e il tag <hr> serve a separare due parti di testo inserendo una riga orizzontale tra le stesse. Esattamente come il tag <br>, si tratta di un elemento vuoto (che non prevede dunque un tag di chiusura) e va posizionato al termine della frase dopo la quale si vuole andare a capo. 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.
Questo elemento, inizialmente, prevedeva l’esistenza di attributi (ad es. align, color, noshade, size, width e così via) che consentivano di definire l’aspetto della riga di separazione. Ad oggi, però, tali attributi sono stati deprecati, in favore della definizione tramite CSS: per esempio, il codice <hr style="border: 6px solid pink;"> produrrà come risultato una riga spessa 6 pixel, continua, di colore rosa.
<div>
Il tag <div>, a differenza di quelli visti in precedenza, è un elemento contenitore, progettato con il preciso scopo di separare parti di documento che hanno contenuti sintatticamente o logicamente differenti. All’atto pratico, il <div>, che deve essere accompagnato dal tag di chiusura </div>, è una “scatola” che contiene altri elementi, spesso usata – in unione con l’attributo class – per definire lo stile estetico di questi mediante CSS.
Tutto ciò che segue il tag di chiusura </div> viene “scritto” su una nuova riga ma senza alcuna spaziatura o carattere di separazione da quella precedente. 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
Il tag <div> supporta un gran numero di attributi, che possono alterare il funzionamento degli elementi al loro interno o il loro stile grafico (in questo caso, si preferisce generalmente usare l’attributo class e specificare la formattazione degli elementi presenti al suo interno tramite CSS).
Personalmente, ritengo che questo tag contenitore dovrebbe essere usato soltanto per separare elementi e/o stili della pagina, e non semplicemente come indicatore di “a capo rigo”, a meno che non si intenda definire delle classi CSS da usare per formattare il testo in un determinato modo.
<p>
Il tag <p> rappresenta un elemento di tipo paragrafo, ed è esattamente ciò che quest’ultimo termine lascia intendere: un separatore tra paragrafi, che può essere usato per mandare il testo a capo (inserendo uno spazio bianco tra il paragrafo seguente e quello successivo e/o applicando una specifica indentatura al primo rigo dello stesso), ma anche per separare strutturalmente elementi collegati tra loro (ad es. caselle dei moduli) all’interno di un documento.
Di norma, il contenuto testuale di un intero paragrafo va racchiuso tra i tag <p> e </p>; tutto ciò che segue il tag di chiusura, sarà scritto su una nuova riga, separata da quella precedente con 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
Esattamente come il tag <div>, anche il tag <p> supporta quasi tutti gli attributi globali HTML, tra cui quelli per definirne l’aspetto grafico, i margini, l’interlinea, la spaziatura iniziale/finale e così via. Alcuni di questi attributi sono deprecati e andrebbero idealmente manipolati esclusivamente mediante CSS.
Tag titoli
Per definizione, HTML prevede l’esistenza di ben sei tag specifici, 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>. Ciascuno di essi prevede un tag di chiusura, e tutto ciò che viene dopo quest’ultimo viene “scritto” dal browser su una nuova riga del documento.
Gli attributi predefiniti di HTML per i tag titoli vedono una particolare formattazione del testo per ciascuno di essi (il tag <h1> è contraddistinto dal testo più grande, il tag <h6> da quello più piccolo) e prevedono una spaziatura rispetto agli elementi indicati sia prima che dopo. La formattazione del testo può essere facilmente manipolata mediante gli attributi HTML globali, o CSS.
A livello pratico, però, fai bene attenzione all’uso dei cosiddetti “header”, in quanto potrebbero influire sull’indicizzazione della pagina a fini SEO: inserire del testo all’interno di un <hX></hX>, infatti, fa capire all’analizzatore del motore di ricerca che si tratta di un elemento importante, che dovrebbe facilmente balzare agli occhi dell’utente, e abusarne potrebbe provocare l’effetto diametralmente contrario, influendo in maniera negativa sul posizionamento della pagina.
Personalmente, ti consiglio di usare il tag <h1> per scrivere il titolo e/o il tema portante del testo, i tag <h2> per la suddivisione in capitoli e, se proprio è necessario, i tag <h3> per la suddivisione in sottocapitoli; cerca di evitare l’uso di più categorie di titoli insieme, a meno che tu non ne abbia effettivamente necessità.
Infine, evita con cura di usare i tag <h1>…<h6> per alterare la dimensione o la formattazione del testo: a questo scopo, serviti dei tag </div> e </p>, opportunamente manipolati con specifiche classi CSS.
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.
Tuttavia, esiste un caso specifico in cui CSS3 può essere impiegato per mandare a capo del testo: quando una parola è troppo lunga e non esiste spazio tra i caratteri che la compongono. Ti faccio un esempio: inserendo una sequenza di lettere continue particolarmente lunga all’interno di un contenitore dalla dimensione orizzontale fissa, la parola che ne deriva, se non contiene spazi bianchi, esce a destra del box, alterando in modo negativo l’estetica della pagina.
Per ovviare a questo problema, è sufficiente dichiarare la proprietà word-wrap nello stile CSS del contenitore in questione e impostarla sul valore break-word. Ti faccio un esempio: la riga di codice <p style="word-wrap: break-word;">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.
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 cura 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.
