HTML 5 : des balises lourdes de sens

Alors que le W3C a proposé le 17 décembre 2012 une nouvelle version (elles sont actuellement au stade de la release candidate, c’est à dire une des dernières phases avant la validation) des spécifications de la 5° version du langage HTML, de plus en plus de webmasters mettent en place l’élément principal du langage, à savoir les balises sémantiques, c’est à dire que leur nom reflète leur fonction.

Vue 3D de la structure d'une page web

Ainsi, les nombreux <div> dont nous usons et abusons depuis quelques années vont être relégués à leur fonction de mise en page tandis qu’apparaissent des balises <header>, <section>, <footer>… qui ont pour but de créer le schéma de la page.

separateur

 Les balises sémantiques pour structurer une page

Le but de cet article n’est pas de détailler par le menu les nouvelles balises du html5 ou celles qui disparaissent, mais de découvrir comment structurer une page simplement en utilisant les nouvelles balises html.

balises sémantiques

 Voici ci-dessus le schéma standard d’une page écrite en html 5. Il ne s’agit pas d’une règle stricte, mais d’un simple guide de mise en place (vous pouvez donc modifier ce que vous voulez). Prenons quelques minutes pour découvrir les balises utilisées :

  • <header> : il s’agit d’un élément d’en-tête de la page. Typiquement on y retrouvera le nom de votre site, votre logo, un slogan et votre 
    • <nav> : cette section contient les éléments de navigation de votre site, c’est à dire le menu ;
  • <section> : Le contenu de la page est regroupé en sections en fonction de leur thématique ;
    • <article> : c’est ici que se trouve le contenu utile de votre page. Si l’on retirait tous les autres éléments de la page, l’article aurait quand même une raison d’être ;
    • <aside> : c’est le cadeau bonus qu’on ajoute au contenu d’une section : liens en rapport, définitions de termes spécifiques… on ajoute des précisions au contenu ;
  • <footer> : que dire du footer ? Ca n’est pas une poubelle dans laquelle on colle 10000 liens, même si on n’en attend pas vraiment de contenu pertinent.

Voici le code html correspondant à ce schéma :

<body>
    <header>
        <!-- Logo -->
        <nav>
            <ul>
                <li><!-- Lien --></li>
            </ul>
        </nav>
    </header>
    <section>
       <h1><!-- Titre de niveau 1 --></h1>
        <article>
            <h2><!-- Titre de niveau 2 --></h2>
            <p><!-- Paragraphe --></p>
        </article>
        <aside></aside>
        <aside></aside>
    </section>
    <section></section>
    <footer>
        <!-- Pied de page -->
    </footer>
</body>

Vous pouvez voir que les titres (<h1> et <h2>) viennent s’insérer dans les balises <article> et <section>.

separateur

Les balises sémantiques et le référencement

Même avec de faibles notions de html, vous êtes certainement capable de lire le code ci-dessus. Vous semble-t-il logique, structuré ? Les robots d’indexation auront le même sentiment !

Il y a fort à parier que dans quelques temps (on parle de mois ou même d’années) les sites structurés grâce à ces balises seront mieux référencés que les autres : les mots clés contenus dans la section article auront sans aucun doute un poids bien plus important que ceux qui se trouvent dans le footer. Vous devez savoir que c’est déjà le cas, mais la pondération sera plus évidente.

separateur

Les balises sémantiques et le Responsive Web Design

Vous avez déjà vu un schéma similaire à celui-ci mais dans un autre contexte ? Cherchez bien… il s’agit en effet d’un gabarit Responsive Web Design ! Si vous utilisez ce squelette de page, il ne vous reste plus qu’à intégrer vos feuilles de style CSS et le tour est joué : votre site s’adaptera à tous les écrans.

Bien sûr, rien ne vous empêche de créer une page fluide avec une classique structure en <div> mais je vous pose la question : Pourquoi ?

Si vous adaptez un site existant, c’est à vous de juger, mais si vous vous lancez sur un nouveau projet ça ne coûte rien.

separateur

Vous avez donc tout intérêt à passer au html 5 pour améliorer le référencement d’une part et faciliter votre développement en Responsive Web Design.

Tous les navigateurs ont déjà implémenté une partie des spécifications html 5, notamment les balises que nous venons de voir, vous n’avez donc pas de bonne raison de ne pas vous y convertir à votre tour.



Source : Spécifications du HTML5 par le W3C

6 réponses

  1. canicule2009 dit :

    Ma question va être bête, mais est-ce qu’on peut avoir plusieurs nav et plusieurs aside dans la page ?

  2. Renaud M.G. dit :

    Au contraire c’est une très bonne question : oui tu peux avoir plusieurs nav ou aside dans un seul document.

    Tu peux avoir un menu pour le contenu et des liens vers les pages génériques, je pense au boutiques (notamment prestashop) qui ont leur catalogue et les pages « CMS » (mentions légales, faq…) dans deux espaces séparés.

    Pour les pages structurées sur 3 colonnes, il est très possible que seule la colonne centrale soit un et que les deux autres soient des .

  3. […] Responsive Junge est un template sobre, blanc sur fond brun, 100% html 5 (donc construit avec des balises sémantiques) et Responsive Web Design qui utilise la Google Web Font Junge. La police a été intégrée au […]

  4. […] par structurer votre site grâce aux balises sémantiques html 5 : utilisez une balise article avec plusieurs balises section pour structurer votre page. Ainsi […]

  5. clem dit :

    il y a une confusion entre les articles et les sections.
    la balise section encadre plusieurs articles et non l’inverse comme spécifié.

  6. Renaud M.G. dit :

    Merci @clembernard, il aura fallu presque 2 ans pour qu’un oeil attentif corrige cette erreur !

Laisser un commentaire

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