I►Dans cet article, nous allons voir les nouvelles balises (nouveaux éléments) introduits en HTML5.
Voici un exemple du début du body :
Ici, nous avons conservé un élément DIV qui contiendra tous les autres éléments HTML de la page
- L’élément HEADER est nouveau :
Il représente l’entête d’une page , d’une section ou d’un article. Il concerne l’introduction du document ou de la section, il peut contenir les éléments de navigation. - L’élément NAV est nouveau :
Il regroupe les éléments de navigation, les hyperliens (internes ou externes). Il est recommandé d’utiliser les listes à puces pour regrouper ces mêmes liens. - L’élément SECTION est nouveau :
Il permet de découper le document en zones regroupant une même thématique. Chaque section peut contenir un header et plusieurs autres éléments dont hgroup
Voici un exemple de section :
- L’élément HGROUP est nouveau :
Il permet de regrouper des éléments de niveau H1, H2, .. H6
PS : A noter , l’utilisation de H1 est normalement unique dans le document HTM mais il pourraît être utilisé plusieurs fois si la logique des thèmes abordés dans la page fait référence à plusieurs informationq différentes.
Regardez la vidéo de Matt Cuts à ce propos :
http://www.youtube.com/watch?v=GIn5qJKU8VM
- L’élément ARTICLE est nouveau:
Il représente une zone indépendante du document, il peut contenir son propre header et footer et peut être rencontré plusieurs fois dans le document Il peut contenir un article, une vidéo, un gadget, un commentaire. Mais son contenu doit être unique d’un point de vue information.
Voici un exemple contenant article
- L’élément ASIDE est nouveau:
Il représente une zone non essentielle du document, une zone annexe ou supplémentaire.
Il est supposé contenir un H1. Assise peut être également rencontré dans article.
Voici un exemple de l’élément ASIDE avec des images …
- L’élément FIGURE est nouveau:
Il regroupe plusieurs médias ensemble (images, vidéos, ..). Il n’est pas obligatoire de présenter les médias dans des p ou des li.
- FIGURECAPTION donne une description des médias contenus dans figure, on peut le placer au début ou à la fin de figure.
- L’élément FOOTER est nouveau :
Il regroupe les informations de bas de page soit dans le document, soit dans section ou article. On peut y insérer des hyperliens sans li. - L’attribut ROLE apparaît aussi avec HTML5 :
Exemple : nav role=’navigation’
ROLE ARIA (Accessible Riche Internet Application) permet de préciser la fonction des éléments du document et de permettre aux matériels et équipement d’accessibilité de se repérer facilement dans le document …=> On peut facilement les manipuler en CSS au lieu d’ajouter un iD ou une Class.
nav[role=’navigation’]
{ background-color:#AED; }