- Learn
- Guida Accessibilità dei siti Web pratica
- Esempi di applicazione degli elementi strutturali
Esempi di applicazione degli elementi strutturali
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 cssforma.htm (già analizzato in precedenza) con quello di struttura.htm, 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 tabforma.htm, 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.
Se vuoi aggiornamenti su Esempi di applicazione degli elementi strutturali inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Google, sicurezza nei Chromebook
Il sistema operativo Google Chrome, disponibile su laptop chiamati Chromebook, fornisce diverse funzionalità di sicurezza per l’utente. La navigazione, ad […]