HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

Un web plus sémantique avec HTML5

Voici ce qu'on est habitué à faire actuellement en HTML4:

structuration sémantique du code HTML avant HTML5

HTML5 propose une formalisation plus rigoureuse en proposant de nouveaux éléments article aside footer header nav et section particulièrement adaptés à cet usage. Voici ce qu'il est préconisé de faire en HTML5:

structuration sémantique du code en HTML5

L'exemple décrit dans cette figure aura le code minimal suivant:

<body>
    <header>...</header>
    <nav>...</nav>
    <article>
        <section>
            ...
        </section>
    </article>
    <aside>...</aside>
    <footer>...</footer>
</body>

Cette approche rend le contenu de vos pages plus sémantique. En distinguant de manière explicite les différents composants de vos pages, vous permettez à des systèmes d'analyse de sites web de mieux répertorier leur contenu. Accessoirement quelqu'un qui aurait à retoucher le code de vos pages s'y retrouvera mieux.

Exemple de contenu utilisant nav:

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/products">Produits</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">A propos</a></li>
    </ul>
</nav>

Exemple de contenu utilisant aside:

<aside>
    <h1>Archives</h1>
    <ul>
        <li><a href="/2007/09/">Sept 2007</a></li>
        <li><a href="/2007/08/">Aout 2007</a></li>
        <li><a href="/2007/07/">Juil. 2007</a></li>
    </ul>
</aside>

Quelques éléments tels cite code details dialog summary sont également destinés à marquer le texte en leur apportant une identification sémantique plus explicite.

L'élément article

C'est l'élément de base qui va contenir les principales informations diffusées par le site.

Par principe, on ne définit qu'un seul bloc avec l'élément article, celui-ci étant fils de l'élément body. On peut faire précéder article par les éléments header et footer.

utilisation de l'élément article en HTML5

Accessoirement, article peut être accompagné de l'élément aside.

L'élément article peut ensuite intégrer tous les autres éléments HTML, en conservant évidemment la structuration générale du codage HTML, en particulier en évitant les erreurs d'imbrication.

Tout comme les autres éléments nouveaux HTML5, l'élément article n'a aucun style prédéfini. Utilisé sans autre indication, il ne servira qu'à structurer le contenu d'une page HTML. Son utilisation devient intéressante quand on commence à exploiter toutes les fonctionnalités des feuilles de style CSS.

L'élément header

Cet élément sert à délimiter le code HTML décrivant un en-tête.

Situé juste après body et en dehors de article, il décrira généralement le contenu de l'en-tête de page.

utilisation de l'élément header en HTML5

On peut également utiliser header pour décrire un en-tête d'article.

Attention, ne pas confondre avec head qui décrit l'en-tête de la page HTML et placé avant body.

L'élément header ne doit pas être utilisé comme sous-ensemble d'un autre élément header ou footer.

L'élément footer

Cet élément s'emploie de la même manière et avec les mêmes restrictions que l'élément header.

L'élément aside

Cet élément sert à marquer un bloc de texte hors contexte. Il peut s'employer comme élément fils de body ou de article.

utilisation de l'élément aside en HTML5

On utilise généralement aside pour afficher des informations comme un menu d'options particulières, des informations ou avertissements. Exemple de structuration:

<article>
   ...texte d'article....
  <aside>
   ....bloc d'info dans l'article
  </aside>
 </article>
 <aside>
  ...bloc d'info hors article...
 </aside>

Dans cet exemple, nous avons défini deux blocs aside, l'un imbriqué dans article, l'autre situé au niveau de body.

L'élément nav

Cet élément sert à délimiter une suite de liens essentiellement destinés à la navigation Internet:

<header>
  <h1>titre d'en-tête</h1>
  <nav>
    <a href='index.php?page=accueil'>accueil</a>
   | <a href='index.php?page=editionClients'>édition clients</a>
  </nav>
</header>

L'élément nav peut être utilisé comme élément fils de article, header, footer ou aside. ou tout sous-élément d'article.

L'élément section

Cet élément sert à découper article en plusieurs sections.

...

On peut utiliser section plusieurs fois dans un même article, mais on évitera d'imbriquer des sections. Tout comme article, une section peut contenir des header, aside, footer et nav...

En conclusion

Ces nouveaux éléments HTML ne sont vraiment utiles qu'en les associant à des styles CSS.

affichage de l'imbrication des éléments HTML avec Firebug

L'utilitaire Firebug (greffon pour Firefox) permet d'analyser le code HTML des pages web. Dans l'image ci-dessus, la sélection d'un élément affiche sa position dans les imbrications HTML: la sélection de footer montre que cet élément est imbriqué dans body.

Sans style, ils ne servent qu'à structurer le code HTML. Si vous les utilisez sans style, ils n'auront aucun comportement sur le rendu à l'affichage de votre code HTML.

Voyons la mise en pratique dans le sujet suivant:

une mise en page simple

Tous les articles sur ce thème