Page 41 - Guida tascabile HTML5
P. 41
Questa differenziazione assume un valore particolarmente marcato, poiché fa sì
che browser e altri strumenti di navigazione identifichino in modo univoco il
blocco principale, consentendo per esempio una navigazione semplificata,
un’indicizzazione più precisa nei motori di ricerca e l’applicazione di regole di
stile CSS lineari e concettualmente comprensibili.
TERMINOLOGIA Prima dell’introduzione del tag <main> nella specifica HTML5, la
prassi prevedeva l’utilizzo diffuso di un markup del tipo <div id="main">. Ora la presenza
di un tag specifico, decisa anche in base all’analisi di queste pratiche comuni,
garantisce un’identificazione più precisa del ruolo semantico del contenuto.
Idealmente il tag <main> è concepito per essere un discendente diretto del tag
<body>, come nell’esempio già illustrato all’inizio del capitolo. Una struttura del
genere garantisce semplicità di interpretazione del codice e della gerarchia delle
informazioni nella pagina:
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
</body>
ATTENZIONE Proprio per il suo valore molto forte di identificazione del contenuto, non
è previsto più di un tag <main> nella pagina; inoltre questo elemento non può essere
nidificato all’interno degli altri tag principali concepiti per creare la struttura della
pagina: <header>, <nav>, <aside>, <footer>.
Strutturare al meglio il contenuto
Nella struttura dei siti che siamo abituati a visitare ogni giorno, elementi come
l’intestazione del sito, il menu di navigazione, il piè di pagina con i link di servizio
fanno da cornice ai contenuti principali della pagina.
Curare la marcatura di questi contenuti è fondamentale per valorizzare le
informazioni e semplificarne la fruizione online.
La specifica HTML5 introduce il tag <article>, dedicato proprio a identificare i
contenuti autonomi nella pagina, cioè quei contenuti che mantengono un senso
compiuto anche se distribuiti indipendentemente dal resto della pagina.
A supporto di tale tag è stato introdotto anche <section>, che in modo flessibile
consente di strutturare in modo ancora più preciso il contenuto, identificando
nuclei di informazioni con un legame ben definito.
