HTML 5: Structure d’une page

Après une rapide introduction à HTML5, nous allons rentrer dans le vif du sujet, avec l’élaboration d’une page « type ». Comme dans la plupart des langages, il y a une grosse différence, entre connaître les instructions, les structures de base, et savoir développer une application complète (une page dans notre cas). Cette règle est d’autant plus vraie dans le cas de HTML5, que de nouvelles balises sont apparues, et qu’elles jouent un rôle dans la sémantique du document.

L’une des principales nouveautés de HTML5 est, en effet, d’apporter des balises « sémantiques » indiquant la nature de leur contenu. L’organisation HTML d’une page ne dépend donc plus uniquement de son design, mais également de son contenu. Il faut donc être particulièrement attentif à l’utilisation de ces balises.

Le problème est que les définitions du W3C, même si elles sont précises, peuvent être interprêtées de multiples façons. L’objectif de cet article est donc d’élaborer une structure de page cohérente, en s’appuyant sur la spec du W3C d’une part, et son interprêtation dans différents thèmes et framework, d’autre part.

La page elle-même

Commençons par créer une page vide, avec une structure minimum.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="xx">
	<head>
		<meta charset="utf-8">
 
		<title></title>
		<meta name="description" content="">
		<meta name="author" content="">
 
		<script src="html5.js"></script>
		<link rel="stylesheet" href="html5.css">
		<link rel="stylesheet" href="styles.css">
 
	</head>
 
	<body>
 
	</body>
</html>

Quelques commentaires:

  • HTML5 a simplifié la balise doctype,
  • Nous retrouvons ensuite les balises habituelles dans une section head, pour définir le titre, ainsi que des méta-données comme une description. Nous pourrons y ajouter ultérieurement d’autres définitions ou liens,
  • Le script html5.js permet de rendre les anciens navigateurs « compatibles » avec HTML5, en créant les balises manquantes. Vous pouvez récupérer ce type de script dans un framework comme BoilerPlate, ou utiliser le script Html5shiv,
  • De la même façon, la feuilles de styles html5.css permet d’indiquer aux navigateurs la façon dont ils doivent gérer les balises qu’ils ne connaissent pas. Le code CSS est disponible dans beaucoup de styles « Reset » (comme celui-ci), ou dans le kit normalize.css. Il n’y a, en fait, rien de très compliqué, il suffit des lignes suivantes:
    1
    2
    3
    4
    5
    
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }

    Attention au kit normalize.css: il n’agit pas comme un reset. Il conserve un grand nombre d’options par défaut des navigateurs.

Nous avons notre page vide, nous allons maintenant essayer de la remplir.

HTML 5 apporte globalement 6 nouvelles balises pour la structuration d’une page:

  • header
  • footer
  • nav
  • section
  • article
  • aside

Header, footer, article

Comme nous avons pu le voir dans un précédent article, le rôle des balises header, footer, et article est assez clair, et bien défini:

Balise Rôle
header Cette balise indique l’en-tête de l’élément parent. Cet élément peut être la page elle-même, un article, une section, …
footer Cette balise correspond au pied de page. Comme pour la balise précédente, footer peut s’appliquer a une page, un article, …
article Cette balise sert à marquer le contenu réel (au sens information) d’une page. article peut donc contenir le texte d’un article (ou d’un page) d’un blog, mais également un commentaire.

Cela veut dire globalement, que nous pourrions avoir:

Balises Header / Footer et Articles

Reste à comprendre le rôle et l’utilisation de trois balises: nav, section, aside.

Nav, section, aside

Globalement les questions posées sur ces trois balises sont les suivantes:

Balise Rôle
nav Peut-on faire apparaître cette balise, plusieurs fois dans une page, ou doit-on le réserver au menu principal? Le menu principal doit-il être intégré au conteneur header?
section La spec nous dit « groupement thématique d’éléments », et il est précisé que la balise ne doit pas être utilisée comment élément générique (comme span ou div). Doit-on restreindre cette balise au regroupement d’éléments de même nature? Peut-on utiliser section pour marquer la partie principale (contenu)? Peut-on/doit-on utiliser la balise à l’intérieur d’un article (pour marquer les paragraphes)?
aside Certainement la moins claire des balises. La définition nous dit que la balise doit servir à stocker des informations n’ayant pas forcement rapport avec le contenu de la page. La spec cite ensuite son utilisation dans le cadre d’une sidebar, ou d’un bloc adjacent au contenu. Certains s’en servent pour marquer la sidebar, par exemple, d’autres s’en servent pour contenir les widgets … Quelle approche choisir?

La balise nav

Au début, la tendance était de l’utiliser de façon unique dans la page. Aujourd’hui, même si un certain nombre de thèmes et de frameworks gardent cette habitude, la tendance serait plutôt d’utiliser cette balise, un peu partout, pour regrouper des liens ayant rapport avec la navigation dans le site. Nous retrouvons donc la balise nav pour

  • Le menu principal,
  • Les menus secondaires, comme « A propos, Contact, … »,
  • Le fil d’ariane (breadcrumb),
  • Les liens « page suivante / page précédente » pour les articles, ou les commentaires, ainsi que « article précédent / suivant ».

Il y a également un certain consensus, pour identifier le menu principal grâce à l’attribut ARIA, role="navigation".

Doit-on placer le menu principal dans l’entête ?
En fait, beaucoup de thèmes/frameworks intègre la balise au conteneur header pour des raisons pratiques: souvent le menu principal du site fait parti de l’entête, et il serait donc inutilement compliqué de placer le bloc nav en dehors du bloc header, alors que visuellement il apparaît à l’intérieur. Donc, pour moi, le choix de placer le menu principal à l’intérieur ou l’extérieur de l’entête dépend du design, car la spec ne donne aucune indication à ce sujet.

Notre page s’étoffe, et devient:

Structure incluant la balise Nav

A l’intérieur des balises nav, l’organisation des liens reste celle utilisée habituellement. Nous pouvons avoir des menus basés sur les balises ul/li par exemple.

La balise aside

A l’origine, cette balise a été conçue pour les colonnes latérales, et portait même le nom de sidebar. Les frameworks/thèmes conçus en 2009/2010 utilisent d’ailleurs aside en ce sens:

Utilisation de la balise aside

Même le très réputé A list apart proposait cette structure.

Depuis, il semble que les choses évoluent, et l’on retrouve de plus en plus ce type de structure:

 

Autre utilisation de la balise aside

Si l’on reprend la définition du W3C, nous avons

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

J’ai également trouvé une page intéressante sur le wiki du W3C, qui montre un cas avec deux sidebars.

Essayons de trouver une logique à tout cela:

  • La définition parle de « contenu proche du contenu principal de la page »,
  • Si l’on regarde le contenu habituel d’une sidebar, nous avons des éléments en rapport avec la page (liens vers des articles de même sujets par exemple), et des éléments qui n’ont pas forcement de rapport (publicité, liste des tags, formulaire de recherche, …),
  • Utiliser aside pour contenir une sidebar n’est donc pas toujours approprié,

A partir de ce constat, nous avons deux approches possibles:

  • Utiliser aside pour contenir les éléments relatifs au contenu, et une autre balise pour les autres éléments (cas du Wiki W3C, ou de VectorSkin,
  • Marquer la sidebar avec une balise « anonyme » d’un point de vue sémantique (div ou section par exemple), et marquer les éléments à l’intérieur avec aside s’ils ont un rapport avec le contenu de la page, ou autre chose s’ils n’ont pas de rapport.
    figure de http://www.basewebmaster.com/html/html5-page-structure.php

La première solution est rigoureuse, mais difficile à implémenter, parce qu’elle apporte des contraintes au niveau du design. La seconde solution, adoptée par un grand nombre de thèmes (WordPress), comme Twenty Eleven, Yoko, ou Just CSS, est plus pragmatique. Elle respecte la définition, tout en étant plus souple.

Pour l’instant, je vais me ranger du côté des pragmatiques, avec le format suivant:

Choix d'utilisation de la balise aside

Cet agencement me semble être un bon compromis:

  • La balise aside n’est pas utilisée pour marquer la sidebar, parce que celle-ci ne contient pas forcement d’information liée au contenu (les articles). J’utiliserai une balise section, comme suggéré dans l’article du W3C précédemment cité.
  • Les blocs ayant un rapport avec le contenu seront marqués avec aside,
  • Les autres avec une balise div.

A noter que aside est utilisée également par certains, a l’intérieur de la balise article, pour contenir, un glossaire, une liste d’articles relatifs à l’article affiché, ou simplement pour souligner un passage spécifique d’un texte (comme l’indique la définition d’ailleurs). Personnellement, je ne le ferai pas pour l’instant.

Par contre, aside me semble indiquée pour contenir les commentaires d’un article:

Utilisation de aside pour les commentaires

La balise section

Au départ, cette balise était utilisée pour marquer le corps de la page (la partie principale). La définition insistant sur le fait que la balise n’est pas un conteneur générique, comme div, les développeurs sont plus partagés. Certains thèmes, ou framework ont carrément fait disparaître la balise, en n’utilisant que des balises div.

Vous pouvez consulter l’article/débat de HTML5 Doctor  qui, pour essayer de rendre les choses plus claires, a publié ce document.

Comme vous l’avez certainement déjà remarqué dans les shémas précédents, j’ai décidé de m’appuyer sur l’exemple du W3C, sachant que de tout façon, pour les questions de mises en forme, ces balises seront contenues, et contiendront des balises div pour leur agencement.

Comme pour la balise aside, je n’utiliserai pas la balise section à l’intérieur des articles: d’une part, techniquement cela pose quelques difficultés, et d’autre part, cela n’apporte pas une grande valeur ajoutée, les balises H1, H2, ... étant dejà là pour segmenter le code.

Conclusion

La sémantisation du langage HTML rend son utilisation un peu plus délicate qu’avec les versions précédentes. Même si les erreurs faites aujourd’hui n’ont pas beaucoup de conséquences, elle pourront en avoir demain: Les outils comme les moteurs de recherche s’appuieront, je pense, sur ces balises pour améliorer la pertinence des recherches.

Le mode d’utilisation des balises risque encore d’évoluer dans les mois à venir. Les choix se stabiliseront, lorsque le langage se généralisera, ou quand les acteurs majeurs du marché publieront leurs recommandations. Un peu de veille technologique s’impose donc.

Référence

3 thoughts on “HTML 5: Structure d’une page”

  1. Merci beaucoup pour cet article qui m’aide beaucoup à l’organisation de la page.
    Très bien expliqué !

    Continuez comme ça,

    Bravo 🙂

  2. Très bon article, je me pose exactement les mêmes questions au niveau du choix de la sémantique à adopter pour mes thèmes (pour un cms). J’espère que cela va vite s’éclaircir car c’est un peu le bordel pour le moment 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *