Titoli, indici e sommari

Se si sta lavorando ad articoli lunghi, relazioni, ricerche o tesine, diventa utile inserire nel documento un indice generale o sommario, strutturato in modo corretto. In questo articolo vedremo come costruire un sommario o indice, utilizzando la gerarchia dei titoli.

Quanto descritto vale per l’uso del CMS WordPress, per creare sommari e indici in altri elaboratori di testo, sarà necessario seguire la guida dei rispettivi editor.

Scopo dei titoli

Titoli, sottotitoli, indice e anche le didascalie, sono considerati microcontenuti, informazioni che con il minor numero di parole, devono chiarire il contenuto della pagina.

L’unico scopo dei titoli è definire una gerarchia di importanza in modo che sia i lettori, sia i motori di ricerca automatici, possano leggere il documento e determinarne facilmente la struttura informativa.

Se il titolo espone il tema, il sommario o indice, ne chiarisce i contenuti. Di solito l’indice è posto all’inizio dell’articolo, o pagina, e aiuta il lettore ad orientarsi, a farsi un’idea di cosa è descritto nel testo. Nelle pagine web le voci del sommario si trasformano in link che puntano alla sezione dell’articolo con il rispettivo contenuto.

Per cosa non si usano i titoli

Si potrebbe pensare di utilizzare i titoli per dare una sorta di presentazione grafica al testo, visto che gli heading HTML attribuiscono particolari dimensioni di testo e il neretto a seconda del titolo usato. Lo scopo dei titoli però non è quello di rappresentare graficamente una parte di testo; altri sono i tag o i comandi da menu, se si utilizza l’editor in modo Visuale, destinati a questo scopo, quali: neretto, corsivo, dimensione del font, variazioni del colore di sfondo e primo piano.

Allo stesso modo non è consigliabile formattare del normale testo con grassetto, dimensione del carattere o altro per farlo sembrare un titolo. In questi casi la struttura del contenuto non viene rilevata.

Se un autore vuole cambiare colore, dimensione e tipo di carattere o applicare qualsiasi altro attributo di presentazione ad un titolo HTML, può ricorrere ai fogli di stile a cascata o CSS. In questo modo non cambia il significato semantico della struttura, così screen reader e altre tecnologie assistive, possono trascurare l’aspetto grafico per evidenziare il significato e la struttura del contenuto.

Applicare la gerarchia dei titoli

Di seguito con l’indicazione <h1>, <h2>,  fino ad <h6>, si  indicano i tag come elementi HTML per inserirli usando l’editor nel modo Testo, mentre con Titolo 1, Titolo 2 ecc, si indica la voce di menu per applicare i titoli nel caso si scriva con l’editor nel modo Visuale.

Negli articoli e pagine di WordPress, come quello che state leggendo, il titolo con gerarchia più alta, <h1> o Titolo 1, è applicato dal sistema, all’inizio dell’articolo o pagina, nello spazio dove è richiesto di inserire un titolo.

È evidente che se il titolo di gerarchia più alta (<h1> o Titolo 1) è già definito dal sistema, tutti gli altri dovranno avere una gerarchia inferiore.

Si applica <h2> o Titolo 2 per tutte le intestazioni di sezione, mentre alle sottosezioni sono applicati i titoli da <h3> Titolo 3 ad <h6>Titolo 6, in ordine decrescente. Nella stessa sezione, è importante non saltare da un titolo all’altro,  se si comincia con <h2> o Titolo 2, si deve evitare di applicare al paragrafo successivo <h4> o Titolo 4 per tornare ad un <h3>, Titolo 3 e poi magari assegnare un titolo di gerarchia <h6>, Titolo 6. Procediamo sempre in ordine gerarchico prima con <h2> Titolo 2 e poi gli altri titoli inferiori. All’inizio di una nuova sezione riapplichiamo <h2> Titolo 2 e via via gli altri titoli in ordine decrescente.

Sommari, SEO e accessibilità

Usare i titoli per creare gli indici è importante per:

dare struttura al contenuto della pagina;

i titoli servono per suddividere la pagina in sezioni, ordinate per ordine di importanza, e utili per la fruizione e comprensione dei contenuti da parte degli utenti. È il browser, o programma utente, a fare questo lavoro dietro le quinte.

Per la SEO ovvero Search Engine Optimization;

la gerarchia dei titoli è importante per specificare i contenuti della pagina. Gli esperti di SEO consigliano di inserire in <h1> le parole chiave principali di cui tratta il contenuto perché è il tag definito per segnalare l’argomento generale della pagina; negli <h2> le parole chiave secondarie.
Googlerank consiglia:

 

1. H1 o H2 per titoli delle pagine;
2. H2 o H3 per i sottotitoli (abstract) delle pagine
3. H4 o H5 per i testi delle pagine
4. H5 o H6 per note, approfondimenti, copyright, nome autore, data pubblicazione.

Per l’accessibilità:

I titoli consentono all’utente di “saltare” rapidamente all’interno del contenuto da una sezione all’altra.

Due criteri di successo per l’accessibilità delle pagine web e dei contenuti pubblicati in Internet, prevedono proprio l’uso dei titoli per dare una struttura logica corretta ai contenuti.

• Ogni pagina web deve avere un titolo che ne descriva l’argomento e la finalità.
• Per descrivere l’organizzazione logica degli argomenti di una pagina web e le finalità dei blocchi di contenuto devono essere utilizzati i titoli (heading), nel corretto ordine gerarchico.

Applicare i titoli con l’editor TinyMCE

L’uso appropriato dei titoli con l’editor TinyMCE di WordPress, è possibile usando l’editor in modalità Visuale dal menu Formato [icon name=”long-arrow-right” class=”” unprefixed_class=””] Formati [icon name=”long-arrow-right” class=”” unprefixed_class=””] Titoli, dal quale è possibile scegliere la gerarchia corretta riconoscibile dal nome che va dal più importante Titolo 1 al meno importante Titolo 6.

Nel modo Testo si devono applicare i tag (X)html da <h1> ad <h6> nei modi descritti nell’articolo Html e WordPress, vale a dire racchiudere la parte di testo che deve essere un titolo, tra i tag di apertura e chiusura con la gerarchia di titolo corretta per definire quella parte di contenuto. Html usa come ordine gerarchico dei titoli i tag da <h1> ad <h6>. Dal più importante al meno iportante; <h1>,< h2>, <h3>, <h4>, <h5>, <h6>.

1. <h1>titolo 1</h1>
2. <h2>titolo 2</h2>
3. <h3>titolo 3</h3>

Tavola dei contenuti

Tra i plugin di WordPress installati per agevolare il lavoro di chi scrive nella Community, c’è Table of Content Plus.

Questo plugin crea automaticamente un indice contestuale specifico o tavola dei contenuti (toc – table of contents) per articoli ed eventualmente pagine lunghe, il cui contenuto deve essere strutturato in sezioni. Il plugin cerca i titoli e assegna un ruolo all’interno dell’indice in base alla gerarchia definita e trasforma la voce dell’indice in un link alla sezione specifica.

Indici semplici

Ecco che diventa utile assegnare i titoli e definire in modo corretto la gerarchia dei titoli.
Per esempio se voglio creare un indice semplice, applico un titolo di h2 ad ogni contenuto logico dell’articolo in questo modo:

Titolo paragrafo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra quis ante vitae lobortis.

Titolo paragrafo 2
In hac habitasse platea dictumst. Etiam tortor libero, hendrerit at odio in, accumsan molestie nulla.

Titolo paragrafo 3
Sed sollicitudin neque et urna tincidunt auctor. Mauris ultrices est ac aliquam porta.

Il sistema genera un indice di questo tipo dove ogni voce punta alla sezione specifica:

Titolo paragrafo 1

Titolo paragrafo 2

Titolo paragrafo 3

Questo indice viene presentato all’inizio della pagina come impostazione predefinita, e può essere nascosto o mostrato a seconda dell’azione voluta agendo sul relativo pulsante.

Indici con sottotitoli

Se però si deve creare un indice strutturato in sottovoci è necessario utilizzare le altre gerarchie di titoli in questo modo:

• Lampadari della casa (h1 o titolo 1 definito dal sistema nel nostro caso)
• Risparmio energetico (h2 o titolo 2)
• paragrafo 1
• Lampadari a Led  (h3 o titolo 3)
  • paragrafo 1
  • paragrafo 2
• Candelabri (h2 o titolo 2)
• paragrafo 1
• Candele (h3 o titolo 3)
  • paragrafo 1
  • paragrafo 2
    • Candele decorative (h4 o titolo 4)
      • paragrafo 1
      • paragrafo 2