I livelli logici o headers h1..h6 del documento HTML

Si parla molto poco degli elementi logici che strutturano il codice HTML di una pagina gerarchicamente. Una buona abitudine per gli autori sarebbe quella di creare una struttura gerarchica del documento secondo gli stili del WCAG.

La sigla WCAG sta per Web Content Accessibility Guidelines un'iniziativa del WAI (Web Accessibility Iniziative) che studia i problemi di navigazione con particolare riferimento ai problemi dei disabili.

A cosa servono i livelli logici H1…H6?

Quando si crea una pagina web é buona abitudine far si che questa sia strutturata gerarchicamente nei suoi contenuti. I livelli logici dell'Html sono dei Titoli. Cioé in ogni sezione del nostro contenuto dove avremo indicato un titolo potremo usare le testatine o Headers come vengono chiamata in inglese.

I livelli logici visti nel testo HTML

Facciamo un esempio semplice di una struttura HTML organizzata gerarchicamente:

Partiamo dal tag <body> perché é nel suo contenuto che appaiono i livelli logici.

<body>

<h1>I livelli logici nel documento HTML</h1>

<p title="data di creazione">03.09.08</p>

<h2>La struttura gerarchica H1…H6</h2>

 <p title="commento sulla funzione dei livelli logici">Una struttura gerarchica da il vantaggio all'autore di poter aumentare semanticamente l'importanza del contenuto. Un title come in questo caso lo vediamo tra il livello logico h2, offre ai Robots un titolo al tema, con cui poter associare ció che subito dopo segue. (é come se fossero tante pagine con ognuna il suo titolo) L'importanza acquisita dal contesto preceduto da un titolo logico é fondamentale per il posizionamento futuro della pagina. </p>

<h3>Sommario</h3>

<p>Seguono h4, h5, e h6 nell'ordine logico di lettura. Una struttura gerarchica organizzata logicamente non puó contenere una diversa sequenza di lettura. Per esempio al livello logico h2 deve "logicamente" seguire h3 al quale logicamente seguirá h4 e via dicendo. Invertire o mischiare i titoli logici del documento distrugge la gerarchia di esso privandolo dei benefici semantici guadagnati dalle intestazioni logiche. </p>

</body>

Bisogna usare tutti i titoli logici?

In relazione al nostro contenuto useremo strutturarlo con il numero di livelli logici che il contenuto ci suggerisce. Non é quindi necessario ne obbligatorio, usare tutte le intestazioni logiche del documento.

Come abbiamo visto, piú sopra abbiamo usato per il paragrafo un titolo, indicando il soggetto del suo contenuto. È buona abitudine dove fa senso, aggiungere le informazioni relative al contenuto dei paragrafi o di qualsiasi altro elemento che contenga il nostro testo. Ad approfittarne di questa pratica consigliata é l'accessibilitá della pagina e l'importanza del succo semantico di essa.

Nel prossimo capitolo parleremo degli Attributi ALT e TITLE del documento HTML.

Alla prossima…. ;)

Angelo Palma

Angelo Palma é consulente e web stratega su www.webxall.net. WebXall si occupa dello studio per l'ottimizzazione del codice HTML.

Leave a Reply

You must be logged in to post a comment.


Copyright (©) 2008-2012 WebXall