2.12
Strutturare il contenuto su una pagina web in modo semantico, facendo uso delle capacità native dei tag.
HTML è stato concepito per la creazione di contenuti ipertestuali e, di conseguenza, la maggior parte dei tag si sono sviluppati per organizzare il testo, come la definizione di titoli, paragrafi, sezioni, articoli e simili.
Questa organizzazione si concentra meno sulla rappresentazione grafica della pagina e più sull’identificazione di temi e significati. Nel corso del tempo, i tag HTML associati agli aspetti grafici hanno perso importanza ed è rimasto un insieme di tag che aiutano a individuare le sezioni e le parti rilevanti del testo.
È da notare che i browser utilizzano questi tag anche per applicare stili predefiniti al testo, migliorando la chiarezza complessiva della pagina.
Un esempio chiaro di questo approccio è il tag paragrafo <p>. Questo tag funge da contenitore per il testo e altri tag all’interno di esso. Ecco un esempio:
<p>
Nel primo paragrafo di questo testo, esamineremo l’importanza del contenuto web e sperimentiamo con un esempio semplice.
</p>
<p>
Di default, il browser inserirà una nuova riga dopo la chiusura di questo secondo paragrafo.
</p>
Questo tag è un elemento di tipo blocco, il che significa che, di base, il browser andrà a capo alla fine del paragrafo, creando margini per il testo.
Questo elemento è ampiamente utilizzato e integrato nei sistemi di gestione dei contenuti (CMS), come WordPress, per formattare il testo in modo coerente e strutturato.
Per inserire una nuova linea di testo, possiamo utilizzare il tag <br>, noto come “break line”, che ci consente di andare a capo all’interno del testo. Tuttavia, è importante notare che, sebbene possiamo andare a capo all’interno del nostro editor, nei browser il testo non va automaticamente a capo fino a quando non raggiunge il limite del contenitore.
Per forzare il testo ad andare a capo, possiamo utilizzare il tag <br> in questo modo:
Questo è un testo che va a capo<br> spesso all'interno dell'editor,<br> tuttavia i browser ignoreranno<br> questo fatto e considereranno il testo come una singola riga continua, che va a capo solo quando incontra il limite del proprio contenitore. Ora, a differenza di quanto detto in precedenza, il testo andrà a capo dopo la parola “considereranno”.
Se desideriamo lasciare una riga di spazio tra due porzioni di testo, di solito useremmo due paragrafi. Tuttavia, in alcune situazioni, potremmo utilizzare due tag <br> consecutivi:
Questo è un testo che va a capo due volte<br><br> Nel browser, il risultato sarà simile alla separazione tra due paragrafi.Titoli di Testata
Gli Intestazioni, ossia i tag h1, h2, h3 e così via, sono fondamentali nella definizione del contenuto di una pagina web. Di solito, questi titoli vengono visualizzati in grassetto e con un testo di dimensioni maggiori. Essi costituiscono elementi di tipo “blocco”, il che significa che il loro aspetto e il margine di spaziatura predefiniti del browser sono proporzionali all’importanza del titolo.
Struttura Gerarchica dei Titoli La chiave per comprendere gli Intestazioni è la loro gerarchia numerica. Inizia con l’h1, che rappresenta il titolo principale della pagina. Per definire le sezioni importanti del testo, comunemente denominate “sezioni principali”, dovremmo utilizzare l’h2. Per sottosezioni più specifiche, possiamo impiegare l’h3 e così via, continuando con una suddivisione più dettagliata fino all’h6.
Ecco un esempio di come potrebbe apparire una struttura gerarchica dei titoli:
<h1>Il Mondo delle Piante</h1>
<h2>Tipi di Piante</h2>
<h3>Fiori Primaverili</h3>
<h3>Alberi Fruttiferi</h3>
<h2>Curare le Piante</h2>
<h3>L'Annaffiatura Adeguata</h3>
<h3>Concimare il Terreno</h3>
La gerarchia dei titoli influenza anche l’importanza di ciascun titolo nella tematizzazione della pagina. Gli esperti di ottimizzazione per i motori di ricerca (SEO) consigliano di inserire le parole chiave principali nell’h1 per definire il contenuto e di utilizzare l’h2 per parole chiave correlate o sussidiarie.
Gerarchia dei Titoli nelle Pagine Principali Se ci riferiamo alla homepage di un sito web, è consigliabile utilizzare l’h1 per il nome del sito, l’h2 per le categorie principali e l’h3 per i titoli degli ultimi contenuti pubblicati (o quelli più importanti). L’h4 può essere impiegato per i titoli di altri contenuti correlati, mentre l’h5 può essere riservato per elementi meno rilevanti, tematicamente meno importanti o meno correlati al tema della pagina.