alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : les sections d'une page web

Web

Dans le dernier article de ma série sur HTML5, je vous ai présenté la structure d'un document web. Nous y avons vu l'élément <html> qui contient tous les éléments de la page et les deux parties principale d'un document, la tête avec l'élément <head> et le corps avec l'élément <body>. Nous avons aussi vu les principaux éléments qui font partie de la tête d'un document.

Dans cet article, nous allons voir les principaux éléments qui découpent les section du corps d'un document html5.

Le tableau qui suit présente les sections principales d'un document html5 :

Éléments sectionnels dans HTML5
Section Élément Description
Navigation <nav> Permet d'accéder à un page ou des parties d'une page.
Aparté <aside> Pour le contenu qui n'est pas directement lié au thème principal de la page
Article <article> Contenu autonome portant sur le thème de la page.
Section <section> Partie d'un article qui commence par un titre.

Navigation

Le principe de base du web, et sa force, c'est de créer des liens entre les documents du web. Pas seulement des liens vers les pages de votre propre site mais des liens vers n'importe quelle ressource qui se trouve sur le web.

La navigation est un groupe de lien avec une fonction particulière : accéder aux principales parties d'une page ou de plusieurs pages qui sont toutes regroupées sous un même thème.

Généralement, ces liens pointent tous vers le même site web.

Par exemple, une page de votre site web pourrait avoir deux sections de navigation. La première sert à accéder aux autres pages de votre site. Cette navigation affiche des liens vers votre page d'accueil, votre blog, votre page à propos et votre page port-folio.

La seconde section de navigation se trouve sur une page spécifique qui est un article de 10000 mots sur un sujet précis. Cet article est divisé en 4 section et chaque élément de cette navigation amène le visiteur directement au début d'une des sections.

Dans cette même page, vous avez un pied de page et celui-ci contient des dizaines de liens vers des pages spécifiques de votre site. Dans ce cas-ci, il ne s'agit pas d'une navigation à proprement parler et ce ne serait pas cohérent d'utiliser une section de navigation pour regrouper ces liens. C'est l'élément <footer> qui serait utile mais nous verrons celui-ci dans un autre article.

Article

L'élément article est une partie du document qui peut se distribuer indépendamment de son contexte. Le cas le plus fréquent est le contenu d'une page mais cela pourrait aussi être un outil qui converti les kilogrammes en livres. Pour savoir si ce contenu devrait être à l'intérieur d'une balise <article>, posez-vous la question :

Est-ce que je pourrais regarder ce contenu sur une autre page sans ce qui se trouve autour de celui-ci?

Si c'est le cas, c'est un article. Des exemples fréquents de contenu qui sont considérés des articles :

  • publication dans un forum
  • article de magazine ou de journal
  • un billet de blog
  • un commentaire
  • un module interactif

Section

L'élément section est celui qu'il faut utiliser si le thème de son contenu devrait apparaître dans une table des matières (par exemple).

Le plus souvent, pour le cas d'articles de blog ou des nouvelles, l'élément section devrait contenir un titre et du contenu.

Avant de décider d'utiliser l'élément section, il faut vérifier d'abord s'il s'agit d'un article (voir plus haut). Si l'élément article ne s'applique pas et que cette partie du document a son propre titre, vous pouvez utiliser l'élément section.

Aparté

L'aparté est une partie du texte qui est lié au contexte mais qui n'en fait pas nécessairement partie. Sur le web, l'aparté s'utilise dans deux contextes :

  • à l'intérieur d'un article
  • à l'intérieur du site web

Dans le premier cas, il s'agira d'un glossaire, d'une citation ou d'autre chose qui est en lien direct avec l'article mais qui n'enlèverait rien à l'article lui-même si cet aparté était retiré.

Pour le deuxième cas, l'exemple le plus fréquent est la barra latérale qui peut contenir des liens vers d'autres articles du même site web, la navigation du site ou même de la publiciét (à condition qu'elle soit en lien avec le thème du site).

Prendre la bonne décision

L'avantage et l'inconvénient de la spécification html5 est que la définition de chaque élément n'est pas complètement fermée. Cela vous permet d'un côté de faire un usage créatif des éléments qui sont disponibles et rend la spécification compatible avec des ajouts futurs. D'un autre côté, choisir l'élément approprié dans un contexte particulier est parfois difficile. Un outil qui m'aide à prendre ces décisons est d'utiliser l'organigramme de html5 doctor.

Il est malheureusement en anglais mais il permet de poser une série de questions qui vous amèneront à utiliser l'élément qui est le plus approprié à votre situation.

Un segment de code vaut 1000 mots

Voici un exemple de code avec les nouveaux éléments contenus dans l'Élément body.

<body>
  <aside>
    <nav>
      <!-- liste de liens vers les pages principales du site ->
    </nav>
  </aside>
  <article>
    <!-- contenu pour la page, en lien avec l'élément title ->
    <section>
      <!-- première section ->
    </section>
    <section>
      <!-- deuxième section ->
    </section>    <section>
      <!-- ènième section ->
      <aside>
        <!-- citation tirée de l'article ->
      </aside>
    </section>
  </article>
  <aside>
    <!-- liste de liens vers des articles semblables ->
    <!-- publicité ->
  </aside>
</body>