La structure d’une page HTML5

Comme l’HTML5 est actuellement mis en œuvre par quasiment tous les webmasters sur Internet, enfin du moins les plus « passionnés », j’ai pensé qu’il était nécessaire d’expliquer certains des nouveaux éléments et de poser les bases de la structure d’une page HTML5. D’autant que plusieurs des sites que j’ai davantage regardés et qui montrent une structure HTML5, ne semblent pas avoir compris comment les nouveaux éléments structurels doivent être utilisés.

La structure d'une page HTML5 - HTML5

Effectivement la structure de base d’un document HTML5 n’a pas changé. Chaque structure comprend une section d’entête (head) contenant des détails invisibles et des liens vers des ressources et une section de corps (body) où les éléments visibles du document résident.

Section d’entête (head)

Voici un exemple pour la section d’entête (head) d’une page HTML5 :

[sourcecode language="HTML"]
<!DOCTYPE html>
<html lang="fr">
<head>
<!– meta –>
<meta charset="utf-8" />
<meta name="keywords" content="mots-clés" />
<meta name="description" content="description" />
<meta name="author" content="auteur">

<!– include –>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="alternate" title="Flux de votre site" href="rss.php" type="application/rss+xml" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />

<title>Titre de la page</title>
</head>
[/sourcecode]

DOCTYPE (doctype)

Le doctype HTML5 comme vous pouvez voir ci-dessus et comme je vous l’ai dis dans un article précédent, est simplifié puisqu’il n’y a qu’un seul type de document HTML. Il est simplement défini comme ceci : <! DOCTYPE html>. C’est aussi simple que cela, et rien de plus n’est nécessaire pour le définir.

Élément HTML (html)

Nous avons maintenant besoin d’ouvrir l’élément <html lang="fr">. Noté que l’attribut de langage est ajouté à la balise html. Ceci est suffisant pour indiquer que l’ensemble du document sera en français, il est donc inutile de l’ajouter à chaque élément. La seule exception serait si vous utilisez une autre langue dans le corps du document.

Par exemple, si vous deviez fournir des liens vers des documents dans d’autres langues, par exemple si vous voulez afficher la langue naturelle du document, vous devrez appliquer l’attribut lang sur chacun des éléments ce qui aura pour effet d’afficher la langue initiale à la racine du document.

Élément d’entête (head)

Maintenant nous allons ouvrir la section head du document. Celle-ci reste inchangée, seulement des éléments ont été enlevés puisqu’ils sont devenus inutiles.

Les élément meta (meta)

Il est inutile de définir les métas-données spécifiques au type de contenu, puisque seul le doctype HTML5 suffit. Il est également superflu de déclarer la langue puisque nous l’avons déclaré précédemment dans l’élément de base html. Les seules métadonnées recommandées sont la déclaration du charset qui va définir la table de caractères pour l’encodage de la page, les mots-clés (keywords), l’auteur (author) et la description (description comme le montre l’exemple.

Liens (link) et Scripts (script)

Les éléments <link ...> et <script ...> en HTML5 n’ont quasiment pas évolué par rapport à la version précédente d’HTML (HTML 4.01). Assurez-vous juste qu’ils ont chacun l’attribut rel.

Note : Avec HTML5, ce n’est plus nécessaire d’ajouter l’attribut type pour déclarer votre élément link (CSS, …) et l’élément script. Il est implicite que ces deux éléments font références respectivement à des feuilles de styles et des scripts. En tant que tel, on peut supprimer l’attribut type.

Enfin l’élément title reste inchangé et fonctionne de la même manière que la version précédente.

Il s’agit seulement d’un exemple d’une structure de base pour l’élément d’entête (head), il y a bien sûr beaucoup d’autres choses que vous pouvez ajouter à cette section, tels que des éléments link particuliers utilisés par les différents moteurs de recherche (search engines, en anglais) et les applications clientes (user agents, en anglais).

Section de corps (body)

Passons maintenant à l’élément body. Tout le contenu placé dans cet élément contient les parties visibles du document, et ceci n’a pas changé avec l’arrivée de l’HTML5. La principale modification sur l’élément body c’est l’ajout d’un certain nombre de nouveaux éléments structurels, et une division des pages en sections.

Ainsi, l’ajout des markups permet de décrire un document HTML beaucoup plus simplement et intuitivement. Ainsi, au lieu de surcharger des éléments div et span, vous aurez désormais un élément beaucoup plus adapté aux différents types de contenu que vous pouvez mettre en œuvre.

Je vous propose une rapide description de ces nouveaux éléments, ainsi que leur définition et la manière dont ils doivent être insérés dans votre page.

section

L’élément section représente une section générique d’un document ou d’une application. Une section, dans ce contexte, est un regroupement thématique de contenu, généralement avec un titre.

  • L’élément section est utilisé pour grouper le contenu similaire dans un bloc
  • L’élément div peut regrouper tout et n’importe quoi, alors que l’élément section a plutôt été pensé pour regrouper du contenu apparenté
[sourcecode language="HTML"]
<section>
<h4>Un titre dans la section</h4>
<p>Il s’agit de l’élément "section"…</p>
</section>
[/sourcecode]

header

L’élément header représente un conteneur pour un groupe d’outils d’introduction ou de navigation.

  • L’élément header peut être inséré dans un élément section. C’est d’ailleurs le mieux à faire pour l’utiliser. Si l’élément est directement le descendant de l’élément body il apparaîtra normalement en haut du document, mais ce n’est pas une réalité puisqu’il est défini par son contenu plutôt que par sa position
  • Il n’est pas limité aux éléments h1, … , h6. Il peut contenir n’importe quel contenu que vous souhaitez tant qu’il est approprié aux données d’un entête
  • Un document peut contenir autant d’en-têtes que vous voulez, mais ils doivent être limités à un unique conteneur
[sourcecode language="HTML"]
<header id="hd1">
<a href="http://www.cv-developpeur-web2.com/samples">
<img class="logo-image" alt="logo" src="http://www.blog-nouvelles-technologies.fr/wp-content/themes/Design-folio/images/logo.png" />
</a>
<hgroup>
<h1>Démos & téléchargements – PHP, JavaScript, HTML5, AJAX, CSS, …</h1>
<h2>La structure d’une page HTML5</h2>
</hgroup>
</header>
[/sourcecode]

nav

L’élément nav représente une section qui contient des informations de navigation, généralement des liens vers d’autres pages ou à des parties dans la page : une section avec des liens de navigation.

  • L’élément nav se rapporte à la section dans laquelle il est défini. Bien souvent, il apparaîtra dans un élément header, et peut être utilisé pour les « aides à la navigation »
  • Il peut contenir un titre, du texte ainsi que des liens
  • Il devrait être utilisé pour identifier les grands blocs de données de navigation. Il n’est pas nécessaire pour une simple liste de liens
[sourcecode language="HTML"]
<nav>
<a href="http://www.blog-nouvelles-technologies.fr/">Articles</a>
<a href="http://www.blog-nouvelles-technologies.fr/contact/">Contact</a>
</nav>
[/sourcecode]

article

L’élément article représente un contenu apparenté autonome dans un document, une page, et est en principe généralement distribuable ou réutilisable, par exemple pour la syndication. Cela pourrait être un post sur un forum, un article de magazine ou un journal, un commentaire d’un lecteur, une entrée de blog, un widget interactif, ou tout autre objet indépendant du contenu.

  • L’élément article pour un blog entoure les articles de lui-même. Pour un forum l’élément article serait composé du post initial avec les messages suivants et les réponses imbriquées
  • Les multiples éléments article sont autorisés, soit imbriqués les uns dans les autres, soit indépendants les uns des autres. Il peut y avoir plusieurs articles dans une section, il peut y avoir plusieurs sections dans un article et il peut même y avoir des sections dans les sections et des articles dans les articles.
[sourcecode language="HTML"]
<article>
<header>
Exemple de structure d’une page en HTML5
</header>
<section>
<h4>Un titre dans la section</h4>
<p>Il s’agit de l’élément "section"…</p>
</section>
<section>
<h4>Un titre dans la section</h4>
<p>Il s’agit de l’élément "section"…</p>
</section>
<footer>
Cet article a été écrit par Yohann Poiron
</footer>
</article>
[/sourcecode]

aside

L’élément aside représente une section d’une page qui se compose d’un contenu. Il s’agirait d’une sorte d’encadré. Il ne s’agit pas que le contenu apparaisse à gauche ou à droite du contenu principal, mais plutôt que ce soit le contenu, et non la position, qui est important.

  • L’élément aside doit être utilisé pour du contenu indirectement apparenté. Ainsi, si vous avez un contenu que vous considérez comme différent du contenu principal, l’élément aside est probablement le bon conteneur
  • Dans un blog les éléments aside peuvent par exemple contenir dans une barre latérale des liens divers vers d’autres articles de blog
[sourcecode language="HTML"]
<aside>
<h1>Catégories</h1>
<ul>
<li><a href="http://www.blog-nouvelles-technologies.fr/archives/category/actualite/">Actualité</a></li>
<li><a href="http://www.blog-nouvelles-technologies.fr/archives/category/developpement/">Développement</a></li>
</ul>
</aside>
[/sourcecode]

footer

L’élément footer représente un pied de page. Il contient généralement des informations sur sa section, comme qui l’a écrit, des liens vers des documents connexes, données de copyright, etc…

  • L’élément footer semble décrire une position mais comme pour l’élément header, l’élément footer semble contenir plutôt des informations au sujet de l’élément qui le contient
  • Des éléments multiples footer sont admis, un pour chaque conteneur est acceptable
  • Pour une page de blog, le créateur et le système utilisé est généralement placé en pied de page. Aussi l’auteur et la date de publication pour chaque article de blog seraient aussi dans un pied de page
[sourcecode language="HTML"]
<footer id="ft1">
Copyright &copy; 2011 Yohann Poiron – Tous droits réservés.
</footer>
[/sourcecode]

La structure de base HTML5

Voici une maquette d’une page Web afin de vous présenter comment chacun des éléments définis ci-dessus pourraient être mis en œuvre ensemble. C’est une structure de base d’une page HTML5 qui peut être utilisée comme un modèle sur lequel vos documents peuvent être modélisés.
Imaginez que le contour gris représente l’élément body avec tous les divers éléments HTML5 descendants de celui-ci.

La structure d'une page HTML5 - Structure HTML5

La structure ci-dessus est seulement un guide mais illustre assez bien les bases de composition d’une page en HTML5.

Tout d’abord, nous avons un entête (header), qui s’applique à l’ensemble du document. Il contient le nom du site, un slogan ou une phrase ainsi qu’un logo que votre site pourrait avoir.

Le prochain élément de navigation (nav), là encore, c’est un élément au niveau du document et donc qui ne doit contenir que les principaux liens de navigation.

L’élément article contient le contenu principal de la page, il pourrait être une entrée de blog, l’article de journal ou encore un post sur un forum. Au sein de cet élément il y a aussi un élément d’en-tête (header) et un élément de pied de page (footer) qui sont directement associés à l’élément article. De plus, il y a deux éléments section qui pourraient contenir, des outils, des ressources ou des commentaires, quelque chose de vraiment séparé du contenu principal, mais toujours lié.

Maintenant la barre latérale de droite a été créé en utilisant un conteneur div. Il contient deux éléments aside destinés au contenu indirectement lié à l’article lui-même. Il représente ce qui l’entoure comme par exemple une barre latérale d’archives d’articles.

Enfin, nous avons en bas du document l’élément footer qui en général contient les informations de votre site, comme des informations concernant l’auteur, les mentions légales, le sitemap, etc…

Démos et téléchargement

Vous pouvez télécharger la démo de l'article dans un seul fichier ZIP.

Conclusion

Voilà l’article se termine ici ! J’espère vous avoir donné un aperçu rapide de la mise en page d’un document en HTML5. Cela a pour effet de structurer la mise en page par des éléments plus « sémantiques ».

De plus, l’analyse des pages par des robots ou par des synthétiseurs vocaux sera facilitée par les éléments header, nav, etc…

Si vous désirez valider votre page, il vous faudra impérativement passer par le validateur officiel du W3C. En effet, l’extension HTML Validator de Firefox par exemple ne semble pas (encore) prendre en compte cette nouvelle version du langage.

Il reste cependant une question : HTML5, est-ce le moment de l’adopter ? A cette question, nos experts du Web français y ont répondu sur ce même blog. Je vous invite à lire leurs réponses.

Avez-vous déjà mis en place une structure HTML5 ? Avez-vous rencontré des difficultés ? Si oui, lesquelles ?

Enfin pour en apprendre un peu plus sur le sujet, je vous propose deux livres édités par Eyrolles. Il s’agit de HTML5 pour les web designers et l’excellent livre de R. Goetter : CSS avancées Vers HTML 5 et CSS 3.

Note : D’ailleurs je vous propose d’être vigilent dans les jours qui arrivent je vous réserve une petite surprise en ce sens.

  • http://www.baverty.com Benoit

    Bon article. il y a cependant une coquille dans ton image, le dernier élément footer apparait en dehors de body.

    J’ai personnellement eu quelques difficultés notamment concernant l’élément section. Je pense que trop de personnes ont tendance à remplacer toutes leurs div par des sections, alors que ce n’est pas son usage. Du coup j’ai tendance à être trop prudent sur son usage. De plus, les spécifications du w3c et la plupart des articles qu’on trouve sur le net utilisent toujours le mot « contenu ». Et si c’est clair quand on parle d’un blog ou d’un article, ça l’est moins dans le cas de pages web qui ressemblent à des applications. (Je pense par exemple au dashboard d’un CMS, ou à la page contenant un formulaire pour répondre dans un forum etc…)

    • http://www.cv-developpeur-web2.com Yohann Poiron

      Ouch effectivement il s’agit d’une coquille… je viens de la corriger !

      Concernant l’élément section il s’agit vraiment d’un élément donc le contenu est vraiment pensé pour regrouper une thématique et comme je le dis dans l’article, l’élément div peut regrouper tout et n’importe quoi, alors que l’élément section a plutôt été pensé pour regrouper du contenu apparenté.

      Après il est vrai qu’il peut y avoir des ambiguïtés sur certaines éléments…

    • http://www.flolio.fr Florent Suc

      C’est vrai qu’à la base, l’élément section doit être utilisé dès l’instant où l’on peut mettre un titre. Cette section doit en fait pour voir représenter un enregistrement dans une base de données.

      La définition tirée des specs est celle-ci :

      The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

      Ce n’est donc absolument pas un élément permettant de mettre du style. C’est le job des div. :)

      Après, tu as tout à fait raison, il est pas évident de découper la partie back-end d’un CMS par exemple ! Personnellement, j’utiliserai des div si j’avais à le faire.

      Pour plus d’informations sur les sections, il y a html5doctor :)

      • Guillaume Palayer

        Merci pour les infos.
        J’ai souvent vu un très mauvais emploi de l’élément . Créant toute une série de noeuds indéfinis dans l’arborescence du doc Web. Bonjour l’accessibilité… Pour vérifier que mes pages Web sont structurées de manière convenable, j’utilise et vous conseille HTML5 Outliner (http://gsnedders.html5.org/outliner/). Cet outil permet de checker l’arbo d’une application Web.
        J’ai également écris à ce sujet, Le syndrome : http://magazineduwebdesign.com/html5-heading-structure-semantique-page-web

    • http://www.baverty.com Benoit

      Oui je consulte beaucoup html5doctor, et avant de les lire je n’utilisais pas du tout ces éléments faute de savoir comment.

      C’est vrai qu’à la base, l’élément section doit être utilisé dès l’instant où l’on peut mettre un titre. Cette section doit en fait pour voir représenter un enregistrement dans une base de données.

      Justement, à mon avis c’est cette simplification qui engendre des mauvais usage. Par exemple, si au niveau le plus haut de ta structure tu n’as qu’un seul élément section, c’est très souvent une utilisation douteuse. Imaginons une page qui affiche juste un document. On voit très souvent des choses comme ca :

      Alors qu’a mon sens on devrait plutôt voir ça :

      Mais bon, je suis loin d’être un expert, et c’est sans doute discutable. Toujours est-il que est à mon avis l’élément le plus mal utilisé et le plus difficile à utiliser parmi les nouveaux éléments sémantiques d’HTML5

  • http://www.arnaud-olivier.fr tutorial webmaster

    Merci, je cherchais justement à me mettre à jour au niveau du html5 que j’avais mis un peu de côté, je mets ta page dans mes favoris ;)!!

  • Pingback: HTML 5: Structure d'une page | Emmanuel GEORJON

  • http://twitter.com/Jio15Fr Unicorn Rider

    Y’a que moi qui ai l’impression de plus facilement faire des pages valables du premier coup en HTML5 ?

  • Pingback: Créa / Dvpt Site web | Pearltrees

  • Pingback: Drayrra (anthonygouriou) | Pearltrees