D’un site à l’autre, nous retrouvons des éléments structurels identiques, répondant aux mêmes besoins : une navigation principale, un en-tête, un pied de page et des contenus organisés en différentes sections... Et pourtant, le langage qui sert à structurer le Web reste terriblement rudimentaire, ne fournissant pas de véritables éléments d’interface.
La prochaine version du HTML devrait se rapprocher du XML en permettant d’écrire des blocs aux intitulés signifiants. En effet, le HTML 5 définit un nouveau modèle d’organisation des contenus et fourni des éléments de structure : au lieu de monter la page à force de div dotées de class et d’ID distinctifs, comme les sempiternels <div id="header">, <div id="content"> et <div id="footer">, on utilise des balises dédiées, plus explicites : <header>, <article>, <nav> ou encore <footer>.
Sachez qu’il est d’ores et déjà possible d’utiliser ces éléments de structure : si les navigateurs actuels ne les comprennent pas, ils n’en font pas une maladie, et les traitent comme s’il s’agissait de <span> [1]. Fonçons !
Exemple de structure HTML 5
Cet affreux petit schéma vous plongera directement au cœur du sujet :
Le plus déroutant est certainement la façon dont ces éléments peuvent être imbriqués les uns dans les autres. Il ne s’agit plus tant de définir les blocs principaux de la page, du moins pas seulement... C’est chaque bloc de la page qu’il convient de structurer, avec ces nouvelles balises.
Découvrons ces nouveaux éléments de structure
Attention, les définitions ci-dessous sont tirées d’un brouillon de spécification [2] et sont donc susceptibles d’évoluer. Mais elles donnent déjà une idée, très intéressante, de la façon dont seront structurées les pages web à l’avenir.
- Comme toujours, l’élément
body, unique, délimite le corps du document. - Comme son nom l’indique, l’élément
sectionpermet de définir les différentes sections thématiques du document, permettant d’en établir le plan, un peu comme les chapitres d’un livre. Une section distingue un bloc logique de contenu (pour les autres blocs, on utilisera desdiv). Elle peut elle-même se se subdiviser en plusieurs sections et être constituée d’un en-tête, d’un pied, et d’une navigation. - L’élément
navsignale la navigation principale du site, qu’elle soit en barre de navigation horizontale ou en menu latéral. C’est donc une liste de liens qui conduisent aux autres contenus du site (ou de la page). - L’élément
articledélimite une portion du document. Ce peut être un message de forum, un article de presse, un billet de blog ou toute autre portion de contenu indépendant. Unarticleimbriqué dans un autre désignera une citation [3]. - L’élément
asidecontient les contenus contextuels, c’est-à-dire en relation thématique avec ce qui l’entoure, mais qu’il est possible d’appréhender séparément du reste de la page, comme par exemple une série de liens « sur le même thème » ou un encadré dans l’article. - Déjà bien connus, les éléments
h1,h2,h3,h4,h5eth6sont des titres de différents niveaux, hiérarchiques, permettant de structurer le document. - L’élément
headerest une entrée en matière qui contient la titraille (au moins unhn) et ce qui permet d’identifier la section qu’il amorce (logo). Il peut également contenir quelques liens de navigation interne, un sommaire, un formulaire de recherche, etc. Mais ce n’est pas un résumé ni un chapo descriptif. - L’élément
footercontient les informations traditionnelles de pied de page : auteur, droits de reproduction, etc. de la section à laquelle il est appliqué. Cet élément peut être présent plusieurs fois dans la page : dans chaquesection,article, etc. Contrairement à ce que son nom laisse entendre, il ne se place pas nécessairement à la fin. Voici un exemple d’application avec explications détaillées : The footer element, by HTML5 Doctor. - L’élément
addresssignale les coordonnées de contact de l’article ou de la section parente.
Accrochez-vous bien, car HTML 5 va swinguer dans nos petites habitudes !
Vos commentaires
# Le 15 juillet 2009 à 21:12, par Valéry
Quel serait le doctype à utiliser à ton avis si l’on souhaite insérer des éléments html 5 dans une page web ? J’imagine que les outils de validation automatique s’en scandaliseraient aussi ?
# Le 15 juillet 2009 à 21:39, par Valéry
En fait ce qui est compliqué est que les éléments en question sont utilisés en fonction du sens et ne correspondent pas seulement, comme dans ton exemple, à des notions de mise en page. Ainsi,
<header>ne correspond pas seulement à<div id="entete">mais aussi à<div class="cartouche">et que l’on peut le trouver au sein d’une section ou d’un article.La distinction entre
<section>et<article>est subtile. C’est pourquoi le schémas me plonge dans la perplexité :<div id="content">ne peut-il pas être remplacé également par une<section>?# Le 15 juillet 2009 à 22:37, par Romy Duhem-Verdière
Non :
<div id="content">reste un bloc de composition formel, du moins purement structurel, alors que<section>est un bloc sémantique. Si j’ai bien compris, les sections sont les grandes parties constituant le plan du document, comme un plan de dissertation, comme des chapitres, comme...Mais j’ai moi aussi du mal à bien distinguer
<article>et<section>. Dans lequel est-il le plus pertinent d’inclure l’autre ??Le
<header>contient typiquement la titraille, c’est-à-dire , mais ce n’est pas nécessairement un en-tête, puisque ce n’est pas toujours en haut de page, ni un cartouche, ni un chapô, ni...Quand au doctype... le code source du site HTML5 Doctor utilise
<!DOCTYPE html>, tout simplement, mais le validateur râle un peu.# Le 17 juillet 2009 à 10:11, par Adrien Leygues
Hello,
deux petites infos :
La page fait 4,12Mo...
# Le 18 juillet 2009 à 12:40, par Felipe
Ce validateur-là râle moins : http://validator.nu/ (à moins que ce ne soit http://html5.validator.nu/ spécifiquement ?)
# Le 18 juillet 2009 à 16:53, par Nicolas Krebs
Non.
Oui. Voir mon commentaire d’il y a deux ans, le dernier brouillon officiel et la dernière version stables des squelettes SPIP.
Ça reste à prouver. Voir par exemple les commentaires de Damien Bonvillain.
Moi aussi.
# Le 22 juillet 2009 à 22:31, par Olivier
XHTML2 était très prometteur, mais Google et Apple l’ont tué définitivement au profit de cet HTML5, c’est déplorable... D’abord, pourquoi pleins de balises qui ne servent à rien ?
Parce que oui, XHTML2 était du XML et que le clown "Hixie" ne veut pas en entendre parler pour HTML5, ce qui est complètement idiot. XML permet de tout faciliter : code propre, facile à réutiliser, modifier,...
# Le 9 octobre 2009 à 18:05, par Joe
Je rejoins Nicolas Krebs « La prochaine version du HTML devrait se rapprocher du XML » : non point du tout. C’est d’ailleurs tout l’intérêt. n’en déplaise à Olivier. Le HTML est un langage de structuration sémantique, nécessairement simple d’usage et souple dans son interprétation. XML — et XHTML 2 tel qu’il s’annonçait — et ses erreurs de parsing n’est pas un langage assez « humain ». HTML doit être « humain ». Et rien n’empêche HTML5 d’être écrit proprement ; voire même sous une forme XHTML5…
Pour moi,
<article>est le corps( core, aussi) du document.<section>est une subdivision de ce corps. Dans le cas d’une page constituée de groupes de contenus,<section>permet de diviser et organiser ces contenus, sans être enfant d’<article>.Un message, un commentaire ?
Suivre les commentaires :
| 