Ora che abbiamo chiarito bene quali sono e a cosa servono gli elementi strutturali dell'HTML, vediamo qualche esempio pratico della loro applicazione. Metteremo a confronto il codice XHTML del file
(già analizzato in precedenza) con quello di
, un file che sostituisce con opportuni elementi strutturali il codice altamente generico presente nel primo.
Una prima cosa da mettere in evidenza è che in un qualsiasi browser grafico di ultima generazione sia i due file sopra citati sia quel
, che era stato costruito interamente su HTML presentazionale, si vedono più o meno allo stesso modo. Ciò rappresenta una dimostrazione di come sia possibile migliorare progressivamente l'accessibilità di un documento senza alterarne sostanzialmente l'aspetto grafico. Se cssforma.htm migliorava l'accessibilità di tabforma.htm perché spogliava il codice HTML dal peso e dalla confusione aggiunti da elementi e attributi di presentazione, struttura.htm migliora l'accessibilità di cssforma.htm aggiungendo struttura logica dove prima c'era solo una sequela indifferenziata di DIV.
Confrontiamo innanzitutto il codice della testata. In cssforma.htm appare così:
<div id="testata">
<span id="titolo">Testata: nome del sito</span><br />
<span id="slogan">slogan del sito</span>
</div>
Ecco invece come appare in struttura.htm:
<div id="testata">
<h1 id="titolo">Testata: nome del sito</h1>
<p id="slogan">slogan del sito</p>
</div>
Notate che i valori degli attributi "id", che rimandano ai relativi stili definiti nel CSS esterno, sono rimasti gli stessi. Sono stati sostituiti semplicemente i due elementi SPAN con un titolo di primo livello ed un paragrafo.
Passiamo ora al menu di navigazione. In cssforma.htm abbiamo:
<div class="capo">
Menu di navigazione
</div>
<div class="menu1">
<a href="cssforma.htm">Voce di menu n.01</a>
</div>
<div class="menu2">
<a href="cssforma.htm">Voce di menu n.02</a>
</div>
[...]
<div class="menu1">
<a href="cssforma.htm">Voce di menu n.11</a>
</div>
<div class="menu2">
<a href="cssforma.htm">Voce di menu n.12</a>
</div>
In struttura.htm abbiamo invece:
<h2 class="capo">
Menu di navigazione
</h2>
<ul>
<li class="menu1">
<a href="cssforma.htm">Voce di menu n.01</a>
</li>
<li class="menu2">
<a href="cssforma.htm">Voce di menu n.02</a>
</li>
[...]
<li class="menu1">
<a href="cssforma.htm">Voce di menu n.11</a>
</li>
<li class="menu2">
<a href="cssforma.htm">Voce di menu n.12</a>
</li>
</ul>
Qui la scritta "menu di navigazione" è diventata un titolo, ma di secondo livello, in modo che sia chiaro per il lettore che il menu è di importanza minore, dal punto di vista gerarchico, rispetto al nome del sito (titolo di primo livello). Inoltre i vari collegamenti del menu, che logicamente rappresentano un elenco, sono stati unificati sotto l'elemento UL, che serve appunto per marcare un elenco non numerato.