Anche qui, all'inizio del tutorial, vorrei sottolineare che non dovreste aspettarvi miracoli dagli elementi presentati. Esteticamente, infatti, non brillano ancora molto. Sono interessanti, però, nel contesto in cui vi permettono di strutturare logicamente e semanticamente i vostri documenti.
Aree di navigazione
Con l'elemento nav è possibile contrassegnare semanticamente le barre di navigazione o altre aree per elementi aggiuntivi. Questo elemento è pensato principalmente per contrassegnare link ipertestuali ad altre pagine o informazioni supplementari.
Un esempio:
<nav> <a href="index.html">Homepage</a> <a href="html5.html">Imparare HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
All'interno di nav potete utilizzare qualsiasi elemento. Potete continuare a definire la navigazione tramite elenchi. Altri elementi possono essere utilizzati senza problemi all'interno di nav. Inoltre, nav può comparire più volte all'interno di un documento.
Indicare i dettagli
Un altro elemento interessante è details. Con questo è possibile - come suggerisce già il nome dell'elemento - indicare informazioni aggiuntive su un contenuto. Fate attenzione che l'elemento details diventa davvero interessante solo in combinazione con l'elemento summary. Maggiori dettagli su questo elemento saranno forniti successivamente.
Prima un esempio di utilizzo di details:
<article>
<details>
<summary>Rinvii all'articolo...</summary>
<ul>
<li><a href="rinvio1.html">Link 1</a></li>
<li><a href="rinvio2.html">Link 2</a></li>
<li><a href="rinvio3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Fonti per l'articolo ...</summary>
<ul>
<li><a href="fonte1.html">Link 4</a></li>
<li><a href="fonte2.html">Link 5</a></li>
<li><a href="fonte3.html"">Link 6</a></li>
</ul>
</details>
</article>
Il contenuto dell'elemento details rimarrà nascosto ai visitatori finché non verrà fatto clic sull'elemento summary contenuto entro details.
Potrebbe essere interessante ad esempio in relazione a un player video. Anche qui un esempio:
<video id="film" width="320" height="180" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<details open>
<summary>Mostra/Nascondi controlli del video player</summary>
<p>
<button id="start" onClick="start()">Avvia/Pausa</button>
<button id="mute" onClick="mute()">Silenzia</button>
<button id="louder" onClick="loud()">Aumenta volume</button>
<button id="lower" onClick="lower()">Abbassa volume</button>
</p>
</details>
Quando la pagina viene caricata, è visibile solo la finestra del player.
Se un visitatore clicca sul link Mostra/Nascondi, vengono visualizzati i contenuti definiti all'interno di summary.
Secondo le specifiche, i browser mostreranno un contenuto predefinito se non viene trovato un elemento summary.
Interessante è anche l'attributo open per details.
<details open> … </details>
Se questo attributo viene impostato, il contenuto dell'elemento summary è già visibile quando la pagina è caricata.
Riassunti
Quindi ora diamo uno sguardo un po' più dettagliato all'elemento summary.
<article>
<details>
<summary>Rinvii all'articolo...</summary>
<ul>
<li><a href="rinvio1.html">Link 1</a></li>
<li><a href="rinvio2.html">Link 2</a></li>
<li><a href="rinvio3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Fonti per l'articolo ...</summary>
<ul>
<li><a href="fonte1.html">Link 4</a></li>
<li><a href="fonte2.html">Link 5</a></li>
<li><a href="fonte3.html"">Link 6</a></li>
</ul>
</details>
</article>
All'interno di summary quindi, in combinazione con details, viene definito il contenuto non ancora aperto. Grazie a summary, è possibile incorporare informazioni aggiuntive che vengono visualizzate solo quando necessario.
Ammettiamolo, potremmo ovviamente realizzare facilmente aree apribili e chiudibili anche attraverso JavaScript. Tuttavia, se JavaScript è disattivato nel browser, l'applicazione non funzionerà. Perciò è auspicabile un ampio supporto per details e summary.
Marginali e annotazioni
Informazioni aggiuntive, annotazioni, riferimenti incrociati, ecc. possono essere strutturati in HTML5 utilizzando l'elemento aside. Il contenuto così strutturato è nel contesto del documento generale, ma non direttamente correlato ad esso.
Si prega di notare che nella specifica HTML5 non è definita la dimensione che dovrebbe essere considerata per un'area contrassegnata con aside. Quindi il contenuto di aside potrebbe essere visualizzato ad esempio come annotazione o come barra laterale.
L'esempio seguente mostra la definizione di un'area aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Creare Web-Apps (Parte 10): jQuery mobile (2)</h2>
<p>In questo tutorial viene creata la prima vera pagina jQM. Il prerequisito è la struttura HTML di base, che avete già imparato a conoscere.</p>
<aside>
<h3>Ulteriori informazioni</h3>
<ul>
<li><a href="#/fn1">Ci sono altre informazioni disponibili...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigazione</h2>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="# ">Contatti</a></li>
</ul>
</nav>
</aside>
</body>Aggiungere date e orari
Le date e gli orari possono essere marcati in modo speciale utilizzando il nuovo elemento time. La particolarità di questo elemento è che le date e gli orari sono leggibili sia per gli esseri umani che per le macchine.
Per gli esseri umani, le date e gli orari vengono inseriti nell'elemento time. Per consentire ai browser di leggere le informazioni temporali, viene utilizzato l'attributo datetime dell'elemento time.
<p>Ci incontriamo il <time datetime="2014-04-15 19:00">15 aprile alle 19:00</time>. </p>
Vogliamo anche sottolineare che al momento questo non ha effetti visivi sui browser attuali, ma è solo finalizzato a rendere le informazioni temporali leggibili dalle macchine.
Evidenziare testi
Con l'elemento mark è possibile evidenziare visivamente singole parole o interi passaggi di testo. Nella specifica di HTML5 si sottolinea che l'elemento dovrebbe essere utilizzato solo in relazione a contenuti testuali. Inoltre, dev'essere correlato a un contesto specifico.
Un esempio:
<p>In questo tutorial viene creata la prima pagina jQM reale. Il prerequisito è la <mark>base HTML</mark> che avete già imparato a conoscere.</p>
Come l'evidenziazione viene rappresentata dai browser non è definito.
Google Chrome e Firefox utilizzano entrambi uno sfondo giallo.
Contrassegnare dialoghi
Anche per l'etichettatura separata dei dialoghi è stata pensata in HTML5. A tal fine, esiste l'elemento dialog. Al momento l'elemento dialog è supportato solo da Safari e Google Canary, cioè la versione per sviluppatori del browser.
Anche in questo caso, ecco un esempio:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Questo è il contenuto del box.</p>
<button id="hide">Chiudi</button>
</dialog>
<button id="show">Mostra il contenuto</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('show').onclick = function() {
dialog.close();
};
})();
</script>
Una volta che il pulsante viene premuto, il dialogo sarà visibile. Affinché ciò funzioni, nell'esempio precedente è stata utilizzata una combinazione di HTML5, CSS e JavaScript.
