HTML & CSS per principianti (Parte 18): Semantica per il Web (1)

Il termine "web semantico" viene ormai utilizzato in modo quasi inflazionato. Molti non sono nemmeno consapevoli di cosa significhi questa tanto acclamata semantica. In realtà è molto semplice: grazie alla semantica, è possibile estrarre le informazioni necessarie/desiderate da enormi quantità di dati.

Un esempio pratico dovrebbe dimostrare l'importanza della semantica. Le foto digitali sono una cosa bellissima. Appena scattate, possono essere mostrate su Internet a tutto il mondo. Quello che vale nel privato si è ormai consolidato anche nel contesto professionale. Agenzie fotografiche, musei, biblioteche e fotografi offrono foto, dipinti o anche versioni digitali di preziosi scritti tramite database di immagini professionali. Sui rispettivi siti web ci sono maschere di ricerca tramite cui è possibile navigare sulla piattaforma. L'esempio più popolare di un motore di ricerca di immagini nel Web 2.0 è sicuramente Flickr.



Chi ha già utilizzato tali motori di ricerca di immagini conosce i loro limiti: se si inserisce ad esempio il termine cavolo, si ottengono foto dai più svariati settori. Così ad esempio la ricerca di immagini di Yahoo! mostra foto di un picchio verde, un tennista di nome Kohl e l'ex cancelliere Helmut Kohl.

A questo punto si evidenzia uno dei difetti del classico web: attualmente le informazioni fornite possono essere comprese dagli esseri umani, ma non possono essere interpretate correttamente dalle macchine - come nel caso mostrato, cioè dai motori di ricerca.

Le macchine possono interpretare informazioni solo se queste sono effettivamente presenti. Ed è proprio questo il punto cruciale in cui entra in gioco la semantica.

Strutturare i documenti

Nelle versioni precedenti di HTML, non c'era semplicemente modo di strutturare semanticamente i documenti. Se si voleva strutturare un sito web, si avevano a disposizione solo titoli e paragrafi. Ecco un tipico esempio della struttura di un sito web classico:

<h1>
   Capitolo
</h1>
<p>
   Paragrafo
</p>
<h2>
   Sottocapitolo
</h2>
<p>
   Paragrafo nel sottocapitolo
</p>
<h3>

Per la strutturazione di un documento, HTML mette a disposizione elementi come h1 fino a h6. Tuttavia, non è possibile creare una struttura profondamente annidata con questi elementi, poiché in HTML non sono previsti elementi come h7 o h8. Ecco dove entra in gioco HTML5, introducendo alcuni elementi aggiuntivi di strutturazione.

• article

• aside

• dialog

• figure

• footer

• header

• nav

• section

In questo tutorial saranno presentati questi elementi. Tuttavia, prima un avviso: non aspettatevi miracoli dal punto di vista estetico da questi elementi. Per rendere attraenti le pagine web che si basano sugli elementi semantici, è necessario utilizzare CSS. E su questo torneremo più avanti.

Ci sono elementi semantici che avete già incontrato, anche se forse a prima vista non sembrano necessariamente correlati alla semantica. Ecco un esempio di un tale elemento:

<progress min="0" max="100" value="40"></progress></pre>





Questo genererà una barra di avanzamento. (L'elemento progress è stato già presentato dettagliatamente in questa serie).







Questo elemento dimostra quanto sia facile creare contenuti che possono essere associati a un determinato contesto. Per il software è infatti immediatamente riconoscibile che si tratta di una barra di avanzamento. Tuttavia, non è così nel caso delle soluzioni che si basano su JavaScript per generare una barra di avanzamento.





Strutture di elementi semantiche



In documenti HTML "normali", la strutturazione dei contenuti si basa sugli elementi div. Per formattarli con CSS, vengono assegnate classi o ID a questi elementi. Questo principio viene sfruttato anche in HTML5. In realtà, un sondaggio condotto da Google ha dimostrato che molti documenti utilizzano sempre le stesse classi.

Un esempio:



<div class="nav"></div></pre>





Molti sviluppatori ad esempio utilizzano nav per inserire la navigazione all'interno di questo elemento div. In HTML5 invece si presenta così:



<nav>Contenuto</nav></pre>





Con l'elemento nav si capisce che non si tratta solo di un elenco di collegamenti ipertestuali. Infatti, quest'elemento descrive un blocco di contenuti in cui sono presenti informazioni sulla navigazione del sito web in un contesto specifico. 





Strutturazione moderna



Come appare tipicamente la struttura di un documento HTML? Fondamentalmente è simile, indipendentemente dai contenuti effettivi della pagina. Di solito sono presenti le seguenti sezioni:

• Intestazione

• Menu principale

• Contenuto

• Piè di pagina

Un sito web che fa uso di elementi div per la struttura potrebbe apparire così:

<body>
   <div id="header">
     <div id="logo">Logo</div>
     <div id="search">Ricerca</div>
     <div id="nav">Menu principale</div>
   </div>
   <div id="content">
     <h1>Questo è il contenuto</h1>
     <div class="section">
       <h2>Sottotitolo</h2>
       <h3>Sezione</h3>
       <!-- Qui è presente il contenuto -->
     </div>
     <div class="section">
       <h2>Sottotitolo</h2>
       <!-- Qui è presente il contenuto -->
     </div>
   </div>
   <div id="sidebar">
     <div id="subnav">Menu secondario</div>
   </div>
   <div id="footer">Piè di pagina</div>
 </body>





Potreste già conoscere costruzioni di div di questo tipo. Per rendere la struttura logica per gli sviluppatori, vengono assegnate classi o ID appropriati alle aree div, con nomi "parlanti". Quindi ad esempio, per gli sviluppatori è chiaro che nei contenuti all'interno del div con ID footer si trovano i contenuti relativi alla parte inferiore della pagina. Il problema è che i nomi possono far intuire la struttura del sito web, ma il sito web non è ancora strutturato semanticamente. È proprio qui che entrano in gioco i nuovi elementi HTML. Infatti, essi permettono per la prima volta una vera strutturazione di documenti o siti web.





Per comprendere meglio, date un'occhiata al seguente documento HTML5:



<body>
   <header>
     <div id="logo">Logo</div>
     <div id="search">Ricerca</div>
     <nav>Menu principale</nav>
   </header>
   <article>
     <h1>Questo è il contenuto</h1>
     <section>
       <h2>Sottotitolo</h2>
       <h3>Sezione</h3>
       <!-- Qui è presente il contenuto -->
     </section>
     <section>
       <h2> Sottotitolo</h2>
       <!-- Qui è presente il contenuto -->
     </section>
   </article>
   <aside>
     <nav>Menu secondario</nav>
   </aside>
   <footer>Piè di pagina</footer>
 </body>





Chiaramente trattarò nei prossimi tutorial gli elementi utilizzati qui. Tuttavia, già da questo esempio si possono osservare i vantaggi degli elementi utilizzati. Ora è finalmente possibile contrassegnare le aree della pagina con elementi appositamente destinati a questo scopo. Tutto ciò che fa parte dell'intestazione della pagina può essere incluso in un elemento header.

Inoltre, ora sono disponibili gli elementi section e article, che consentono una strutturazione dei contenuti delle pagine molto più chiara. Come potete vedere, vale la pena dare un'occhiata approfondita alle possibilità offerte da HTML5 per quanto riguarda la strutturazione semantica dei documenti.