Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 8 di 58
  • livello principiante
Indice lezioni

Titoli, paragrafi e testi

Organizzare il testo in una pagina Web semanticamente, sfruttando le funzioni intrinseche dei tag
Organizzare il testo in una pagina Web semanticamente, sfruttando le funzioni intrinseche dei tag
Link copiato negli appunti

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.


Ti consigliamo anche