Encore une fois, au début du tutoriel, nous tenons à signaler que vous ne devriez pas attendre de ces éléments présentés des miracles. En termes visuels, ils ne sont en effet pas très attrayants. Cependant, ils sont intéressants dans la mesure où ils vous permettent de structurer logiquement et sémantiquement vos documents.
Zones de navigation
Avec l'élément nav, vous pouvez désigner de manière sémantique des barres de navigation ou d'autres zones pour des éléments supplémentaires. Cet élément est principalement conçu pour marquer des liens hypertextes vers d'autres pages ou vers des informations complémentaires.
Un exemple :
<nav> <a href="index.html">Accueil</a> <a href="html5.html">Apprendre le HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
À l'intérieur de l'élément nav, vous pouvez utiliser n'importe quel élément. Vous pouvez donc toujours définir la navigation à l'aide de listes. D'autres éléments peuvent également être facilement utilisés à l'intérieur de nav. De plus, nav peut apparaître plusieurs fois dans un document.
Préciser les détails
Un autre élément intéressant est details. Avec cela, vous pouvez - comme le suggère déjà le nom de l'élément - fournir des informations supplémentaires sur un contenu. Notez que l'élément details devient vraiment intéressant lorsqu'il est associé à l'élément summary. Plus d'informations sur cet élément ensuite.
Tout d'abord, un exemple d'utilisation de details :
<article>
<details>
<summary>Liens vers l'article...</summary>
<ul>
<li><a href="lien1.html">Lien 1</a></li>
<li><a href="lien2.html">Lien 2</a></li>
<li><a href="lien3.html">Lien 3</a></li>
</ul>
</details>
<details>
<summary>Sources de l'article ...</summary>
<ul>
<li><a href="source1.html">Lien 4</a></li>
<li><a href="source2.html">Lien 5</a></li>
<li><a href="source3.html"">Lien 6</a></li>
</ul>
</details>
</article>
Le contenu de l'élément details reste caché aux visiteurs jusqu'à ce que l'élément summary contenu dans details soit cliqué.
Cela pourrait être intéressant par exemple en relation avec un lecteur vidéo. Voici un exemple à cet effet :
<video id="video" 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>Afficher/Masquer les contrôles du lecteur vidéo</summary>
<p>
<button id="start" onClick="start()">Démarrer/Pause</button>
<button id="mute" onClick="mute()">Muet</button>
<button id="louder" onClick="louder()">Plus fort</button>
<button id="quieter" onClick="quieter()">Moins fort</button>
</p>
</details>
Lorsque la page est chargée, seule la fenêtre du lecteur est visible.
Cependant, si un visiteur clique sur le lien Afficher/Masquer, les contenus définis dans summary seront affichés.
Conformément à la spécification, les navigateurs afficheront un contenu par défaut s'ils ne trouvent pas d'élément summary.
En outre, l'attribut open pour details est également intéressant.
<details open> … </details>
Lorsque cet attribut est défini, le contenu de l'élément summary est visible directement lors du chargement de la page.
Résumés
Examinons maintenant de manière plus détaillée l'élément summary.
<article>
<details>
<summary>Liens vers l'article...</summary>
<ul>
<li><a href="lien1.html">Lien 1</a></li>
<li><a href="lien2.html">Lien 2</a></li>
<li><a href="lien3.html">Lien 3</a></li>
</ul>
</details>
<details>
<summary>Sources de l'article ...</summary>
<ul>
<li><a href="source1.html">Lien 4</a></li>
<li><a href="source2.html">Lien 5</a></li>
<li><a href="source3.html"">Lien 6</a></li>
</ul>
</details>
</article>
À l'intérieur de summary, le contenu non ouvert est défini en relation avec details. Grâce à summary, il est possible d'intégrer des informations supplémentaires qui ne sont affichées que lorsque nécessaire.
Il est vrai qu'il serait possible de réaliser des sections ouvrables et refermables simplement en JavaScript. Cependant, si JavaScript est désactivé dans le navigateur, l'application ne fonctionnera pas. Il est donc souhaitable que details et summary soient largement pris en charge dans un avenir proche.
Marges et marginalie
Des informations supplémentaires, des marginalia, des renvois, etc. peuvent être distinguées dans HTML5 avec l'élément aside. Le contenu ainsi distingué se trouve certes dans le contexte du document global, mais n'y est pas directement lié.
Veuillez noter que la spécification HTML5 ne précise pas quelle dimension devrait être utilisée pour une zone distinguée par aside. Par conséquent, le contenu de aside pourrait par exemple être affiché comme une marginalie, mais aussi comme une barre latérale.
L'exemple suivant montre la définition d'une zone aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Créer des applications Web (partie 10) : jQuery mobile (2)</h2>
<p>Ce tutoriel permet de créer la première page jQM réelle. La condition préalable est la structure HTML de base que vous avez déjà apprise.</p>
<aside>
<h3>En savoir plus</h3>
<ul>
<li><a href="#/fn1">Il y a plus d'informations...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="# ">Contact</a></li>
</ul>
</nav>
</aside>
</body>Ajouter des indications de temps
Les indications de temps peuvent être spécialement distinguées à l'aide de la nouvelle balise time. La particularité de cette balise est que les indications de temps sont lisibles par l'homme et la machine.
Pour les humains, les indications de temps sont écrites dans la balise time. Afin de permettre aux navigateurs de lire également les informations de temps, l'attribut datetime de la balise time est utilisé.
<p>Nous nous rencontrons le <time datetime="2014-04-15 19:00">15 avril à 19 heures</time>. </p>
À ce stade, il est important de noter que dans les navigateurs actuels, cela n'a aucun impact visuel pour l'instant, mais vise uniquement à rendre les indications de temps lisibles par machine.
Mettre en valeur des textes
Avec l'élément mark, il est possible de mettre en évidence visuellement des mots ou des passages de texte entiers. La spécification HTML5 souligne expressément que l'élément ne doit être utilisé qu'en relation avec du contenu textuel. De plus, il doit être en relation directe avec le contexte.
Un exemple :
<p>Dans ce tutoriel, la première vraie page jQM est créée. La condition préalable est le <mark>framework HTML</mark> que vous avez déjà appris.</p>
La manière dont les navigateurs mettent en évidence le texte n'est pas définie.
Cependant, Google Chrome et Firefox utilisent tous deux un arrière-plan jaune.
Distinguerr les dialogues
La distinction des dialogues a également été prise en compte dans HTML5. Pour cela, il existe l'élément dialog. Actuellement, l'élément dialog n'est pris en charge que par Safari et Google Canary, c'est-à-dire la version de développement du navigateur.
Voici un exemple :
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Ceci est le contenu de la boîte.</p>
<button id="hide">Fermer</button>
</dialog>
<button id="show">Afficher le contenu</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Dès que le bouton est cliqué, le dialogue est visible. Pour que tout cela fonctionne, l'exemple précédent est basé sur une combinaison de HTML5, de CSS et de JavaScript.
