balises HTML5
| nom de balise | description |
|---|---|
| section | bloc de contenu |
| article | un article |
| aside | bloc lié à un article |
| hgroup | en-tête de section |
| header | bloc d'en-tête |
| footer | bloc de fin |
| nav | zone de navigation |
| dialog | zone de conversation |
| figure | zone d'éléments visuels |
| figcaption | idem à caption dans tableau |
| details | zone de détails |
| nom de balise | description |
|---|---|
| mark | marque du contenu |
| meter | une grandeur |
| progress | un niveau de progression |
| command | une commande |
| keygen | générateur de clef |
| time | une heure ou une date |
| output | un résultat de calcul |
| iframe | une ressource HTML externe |
| wbr | un opportunité de saut de ligne |
| ruby, rt et rp | pour les annotations ruby |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test des tête et pied de page HTML 5</title>
</head>
<body>
<header>
<h1>Le titre</h1>
</header>
<p>Ceci est mon site d'avant-garde et il est très bô !</p>
<footer>
<h4>Fin de la page</h4>
</footer>
</body>
</html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test de sections de navigation HTML 5</title>
</head>
<body>
<p>Ceci est un autre site.</p>
<nav>
<ul>
<li><a href="test1.html">page 1</a></li>
<li><a href="test2.html">page 2</a></li>
</ul>
</nav>
<h4>Fin de la page</h4>
</body>
</html><article>
<header>
<h1>À propos de la vie</h1> <-- Chaque section peut avoir un H1 -->
<p><time pubdate datetime="2011-05-19"/>;</p>
</header>
<p>la naissance, la vie, la mort...</p>
<p>Oui, mais quoi encore ?</p>
<footer>
<a href="?comments=1">Commentaires...</a>
</footer>
</article><meter min="0" max="100" value="50" low="55" high="95">à
moitié rempli.</meter> <!-- Devra se mettre en orange --><progress max="100" value="80">80% du travail a été
effectué.</progress> <!-- Devra afficher une barre de progression à 80% --><time datetime="2011-06-17 10:30:55">6 juin 2011 à
10h30mn et 55s.</time> <!-- Devra afficher la date -->Cette balise n'est actuellement pas supportée par les navigateurs et donc n'est pas testable !
<iframe sandbox="" src="ma_page.html"></iframe>
Avant de recourir à l'utilisation de balises génériques il est bon de s'assurer qu'une balise dont la sémantique correspond à notre besoin n'existe pas déjà. HTML 5 apporte une multitude de sections prédéfinies qu'il est bon de parcourir affin d'éviter cette erreur !