Titoli, paragrafi e testi

9 maggio 2016

HTML è nato per la realizzazione di contenuti ipertestuali ed è naturale che la maggior parte dei tag siano stati creati per l’organizzazione dei testi, quindi per la definizione di titoli, paragrafi sezioni, articoli, etc.

Questa organizzazione ha poco a che vedere con la rappresentazione grafica della pagina, quanto con la sua tematizzazione e con la sua semantica. Nel corso del tempo i tag HTML che definivano aspetti grafici sono stati via via deprecati e sono rimasti quelli che aiutano a identificare sezioni e porzioni significative del testo.

È anche vero che i browser utilizzano questi tag anche per dare maggior chiarezza al testo assegnando loro degli stili preconfezionati.

I paragrafi <p>

Il paragrafo <p> è un elemento contenitore che al suo interno prevede l’inserimento di testo e di altri tag. Ecco un esempio:

<p>Nel primo paragrafo di questa trattazione, ci occuperemo 
dell'importanza del testo nel Web. Grazie ad un semplice esempio 
possiamo sperimentare molte cose.</p>

<p>Per default il browser manderà a capo il contenuto di questo 
secondo paragrafo.</p>

Si tratta peraltro di un elemento di tipo Block, questo ad esempio significa che il comportamento di base del browser sarà quello di andare a capo al termine del paragrafo e che sono stabiliti margini per il testo.

Come si intuisce questo elemento è molto utilizzato e sfruttato anche dai CMS, come WordPress, per imbrigliare il testo.

Andare a capo, <br>

Il tag <br> sta per break line e serve per andare a capo nel bel mezzo di un testo. Come è facile notare infatti, anche se andiamo a capo all’interno dell’editor, il testo nel browser non va a capo se non alla fine dello spazio disponibile per il suo contenitore.

Per forzare il testo ad andare a capo, inseriamo un <br>, in questo modo:

Questo è un testo che va a capo 
spesso all'interno dell'editor
tuttavia i browser ignoreranno
questo fatto e considereranno <br>
il testo come una singola 
riga continua, che va a capo
solo quando incontra il limite
del proprio contenitore

Ora, a differenza di quanto recita, il testo andrà a capo dopo la parola “considereranno”.

Se vogliamo lasciare una riga di spazio tra una porzione di testo e l’altra tipicamente utilizzeremmo due paragrafi ma può capitare di utilizzare un doppio <br>.

Questo è un testo che va a capo due volte<br>
<br>
nel browser il risultato somiglia alla separazione 
tra due paragrafi

Headings, i titoli h1, h2, h3, etc.

I titoli (headings) sono i tag che ci aiutano a definire il tema della pagina. In genere sono rappresentati in grassetto e con una dimensione del testo ingrandita. Anche questi sono elementi di tipo block e sia le dimensioni sia il margine applicato per default dal browser sono proporzionali all’importanza del titolo.

Gerarchia degli headings

Come si intuisce dai numeri i titoli sono gerarchici. Questo significa che h1 sarà il titolo principale della pagina. Se ci serviranno altri titoli per specializzare alcune sezioni importanti del testo (le “main sections”) è consigliato scegliere prima h2, per le sottosezioni utilizzeremo h3 e così via con una suddivisione sempre più granulare fino ad utilizzare l’h6.

<h1>Casa</h1>

<h2>Acquistare la casa</h2>

<h3>Le pratiche per l'acquisto di casa</h3>
<h3>Agenzie immobiliari, quali scegliere</h3>

<h2>Arredare la casa</h2>

<h3>Come scegliere la cucina per la nuova casa</h3>
<h3>Lampadari, tipologie e differenze</h3>

La gerarchia impatta anche sul peso che gli headings hanno in termini di tematizzazione della pagina. I SEO tendono a consigliare di inserire nell’h1 le parole chiave principali per definire il contenuto e negli h2 parole chiave che sono accessorie.

Gerarchia degli headings nelle home page

Se stiamo parlando della home page è più indicato utilizzare l’h1 per il nome del sito, l’h2 per le categorie e h3 per i titoli degli ultimi contenuti pubblicati (o i più importanti). L’h4 può essere utile per i titoli di altri contenuti correlati e h5 per cose meno importanti, meno tematizzanti o meno correlate con il tema della pagina.

Tutte le lezioni

1 ... 7 8 9 ... 58

Se vuoi aggiornamenti su Titoli, paragrafi e testi inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Titoli, paragrafi e testi

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy