C’est officiel depuis quelques jours, l’HTML5 dispose désormais d’une feuille de route pour la publication de ses spécifications.

Le W3C a annoncé une standardisation officiel en 2014. Une bonne nouvelle pour tous, cela permettra aux développeurs et aux navigateurs d’avoir une référence unique. Et c’est tant mieux, parce que le Web regorge d’utilisations plus qu’hasardeuses des nouvelles spécifications HTML5. Un seul exemple : les éléments sémantiques. Un peu de révisions avant les examens de fin d’année ?

La sémantiquoi ?

La sémantique est l’étude du sens des unités lexicales – les mots et de leurs combinaisons.

Nous définirons (…) le mot comme l’unité sémantique minima de la parole. (…) La science du mot s’appelle lexicologie. Elle comportera deux subdivisions, selon qu’on s’intéresse au nom ou au sens. L’aspect formel des mots est examiné par la morphologie (…). Les significations lexicales constituent le domaine de la sémantique. S. Ullmann, Précis de sém. fr., Berne, éd. A. Francke, 1952, p. 33.

Appliqué au Web, cela donne le Web sémantique

Tim Berners Lee fut le premier a énoncé le terme de Web sémantique dans un article intitulé The Semantic Web (Scientific American Magazine, 17 mai 2001). Ce terme désigne une évolution du Web offrant la possibilité d’exploiter et d’interpréter automatiquement les données disponibles via des agents logiciels. L’accomplissement de cette lourde tâche revient au W3C dont un des principaux objectifs est de concevoir les techniques capables de tirer parti des données contenues dans les environnements fermés des bases de données en ligne.

Finalités du Web sémantique ?

Les limites et les inconvénients du Web :

• Disparité des formats, des informations,
• Description et indexation insuffisante des ressources,
• Recherche approximative d’informations,
• Absence d’exploitation sémantique des liens hypertexte.

Objectifs du Web sémantique :

Métamorphoser le Web en un lieu où les ressources circuleraient librement entre machines afin d’être analysées, exploitées et distribuées via des services et des applications variés.

Le Semantic Web Stack – Photo Wikipédia

Cela libérerait l’utilisateur d’une partie importante du travail de recherche et d’exploitation d’informations en les lui restituant sous une forme intelligible.

Pour atteindre son objectif, le Web sémantique a besoin de s’appuyer sur le Web des données afin d’obtenir des données structurées à l’aide de liens (URI) et de métadonnées(RDF, Dublin Core, etc.). Via cette structuration, le Web s’autorise à :

• Exprimer explicitement les relations sémantiques entre les données, à l’instar de l’hypertexte pour les pages,
• Simplifier l’utilisation et la recomposition des ressources par les agents logiciels,
• Enrichir d’annotations les ressources du web, décrivant leurs contenus et leurs facultés,
• Offrir une standardisation de la structure des ressources,
• Développer une lexicographie universelle pour la production, le stockage et l’échange des données.

Les nouveaux éléments sémantiques HTML5

Le Web sémantique ne se limite pas à la structuration des bases de données. Une structuration des pages Web est également nécessaire. Cela passe par l’utilisation de nouvelles spécifications telles que :

• Les microdata,
• La RDFa,
• Les microformats,
• Les éléments sémantiques HTML5.

Vous l’aurez compris, le Web sémantique est là pour faire le ménage. Il lui faut de la structure, de l’ordre.

La gestion des headings HTML5

Rétrospective

Un des principaux enjeux de l’HTML5 est la gestion des headings.

Avec l’HTML4, nous devons simplement déclarer un chapelet de tags H1 ⇒ H6 pour créer une hiérarchie logique au sein de nos pages Web. L’arborescence de la structure d’un document et de ses éléments peut être détaillée en veillant à ne pas ignorer l’ordre hiérarchique : un tag h3 ne peut pas être déclaré à la suite d’un tag h1.

Les moteurs de recherches et les lecteurs d’écran les interprètent telle une succession d’occurrences hiérarchisées, sans se préoccuper de leur emplacement au sein du document. Le rendu du DOM (Document Object Model) – l’arborescence de la structure d’un document et de ses éléments – sera interprété de la manière suivante :

Titre de la page (h1)
    |
    +-- Sous section (h2)
            |
            +-- Sous section (h3)
                    |
                    +-- Sous section (h4)
                            |
                            +-- Sous section (h5)
                                    |
                                    +-- Sous section (h6)

Comment faire si nous souhaitons détailler davantage le plan de notre page en ajoutant des noeuds aux sous-sections ? Avec l’HTML4, la création d’un nouveau noeud au sein de l’arborescence doit se faire via l’insertion d’un `h4` entre deux `h3` par exemple. Pas très intuitif.

Titre de la page

Section

...

Sous-section

...

Nouveau noeud

Sous-section

…

Avec cette astuce, l’arborescence de notre document sera la suivante :

Titre de la page (h1)
    |
    +-- Sous section (h2)
            |
            +-- Sous section (h3)
            |       |
            |       +-- *Nouveau noeux* (h4)
            +-- Sous section (h3)
            |
            +-- Sous section (h3)
            |
            +-- Sous section (h3)

Le « poids sémantique » de notre nouveau noeud au sein de l’arborescence est ainsi réduit par rapport à son parent `h3`. Cela permet aux lecteurs d’écran et aux bots des moteurs de recherches d’interpréter correctement l’organisation des éléments au sein de la page. ##L’HTML5, une nouvelle structure de page Web Badge HTML5

Avec l’HTML5, la structure l0gique d’un document Web – son plan – est dictée par l’imbrication et l’emplacement des headings dans les nouvelles balises sémantiques telles que , , , , , et .

Avec l’HTML4, la seule manière de structurer l’arborescence d’un document est l’emploi des tags h1⇒ h6. Dorénavant, l’arborescence est élaborée en fonction des noeuds crées par les balises HTML5 et leurs headings.

section L’élément `section` représente une section d’un document ou d’une application Web. Une section comprend un bloc ou un groupe de contenus sur une thématique commune, devant être accompagnée d’un heading. Les exemples d’utilisations peuvent être la définition des chapitres, des tabs d’une page, ou des sections d’une thèse. Une page d’accueil d’un site Web peut être séquencée via une section d’introduction, une autre consacrée à la présentation d’un service et une dernière pour la partie coordonnées de contact. nav L’élément `nav` représente une section d’une page reliant des pages ou des parties d’une page : c’est une section servant à la navigation. L’élément `nav` doit être employé uniquement pour relier les sections les plus importantes d’un site Web. Il est courant de retrouver une liste de liens en footer, pointant vers les grandes rubriques. Dans de tels cas, l’utilisation de l’élément `nav` n’est pas nécessaire. À lui seul, l’élément `footer` peut remplir ce rôle. article L’élément `article` représente un item contenant une composition indépendante de l’agencement d’un document, d’une page, d’une application ou d’un site Web et étant destinée à être réutilisée de manière autonome dans un autre agencement, par exemple au sein d’un flux de syndication. Cela peut être un message de forum, un article, une section de login, un widget, un commentaire, ou tout autre élément indépendant du contenu le juxtaposant. aside L’élément `aside` représente une section d’une page dont le contenu est relatif aux blocs de contenus adjacents, mais ne peut pas être fusionné à ces derniers. Il est généralement employé en tant que sidebars, citations, publicités, groupement d’éléments nav et d’autres contenus à différencier du contenu principal de la page. hgroup L’élément `hgroup` est un groupement des tags `h1` ⇒ `h6` lorsque le titre d’une section comporte plusieurs niveaux hiérarchiques, tels que des sous-titres ou une baseline. header L’élément `header` représente une section d’introduction. Il peut contenir le titre (`h1` à `h6`) ou un groupe de titre (`hgroup`), néanmoins cela n’a rien d’obligatoire. L’élément `header` est utilisé également pour envelopper des sections d’une page tels que les items de navigations, les logos, les formulaires de recherche, les informations relatives à la publication d’un article, etc. footer L’élément `footer` représente généralement la partie inférieure des blocs de contenus le précédant ou le pied de page de l’élément racine du document : auteur, copyright, liens vers des ressources relatives, annexes, date, etc.

Comparons la valeur sémantique de ce changement advenu avec l’HTML5

Prenons l’exemple suivant en HTML4 :

Le temps et l'espace

Qu'est-ce que le temps

...

Qu'est-ce que l'espace

...

L’arborescence du document sera celle-ci :

Le temps et l'espace (h1)
    |
    +-- Qu'est-ce que le temps (h2)
    |
    +-- Qu'est-ce que l'espace (h2)

L’ensemble du code est valide en HTML4 et en HTML5. Néanmoins l’HTML5 apporte de nouveaux éléments donnant une valeur sémantique en plus à notre document.

ID header ne donne aucune information sur sa nature lorsque le document est parcouru. Sa valeur sémantique est nulle. De même pour ID article. Les user agents Web tels que les navigateurs, les robots d’indexation, en passant par les lecteurs d’écran ou les navigateurs braille ne sont pas en mesure d’interpréter la valeur sémantique d’un ID.

L’HTML5 avec les balises et compense cette absence de valeur sémantique en notifiant à qui veut l’entendre que nous sommes en présence d’une en-tête de document et d’un bloc de contenu indépendant de l’agencement de la page.

HTML5 et bon sens

Voici une structure typique d’une page Web en HTML5 :

Mon site

Baseline

Titre de l'article

Sous-section

...

Titre de l'article

Sous-section

...

Sidebar

...

Blog roll

... 

L’arborescence de la page sera la suivante :

Mon site (h1)
    |
    +-- Titre de l'article (h1)
    |       |
    |       +-- Sous section (h2)
    +-- Titre de l'article (h1)
    |       |
    |       +-- Sous section (h2)
    +-- Sidebar (h1)
    |
    +-- Blog roll(h1)

Que ce passe-t-il si nous ne déclarons aucun heading dans notre page Web ?

Racine indéfinie
    |
    +-- Section indéfinie
    |
    +-- Section indéfinie
    |
    +-- Section indéfinie
    |
    +-- Section indéfinie

On observe un maintien de l’arborescence. Ce sont les balises , et qui créent les noeuds – les sections – au sein de l’arborescence. En revanche, le fait de supprimer les headings ôte toute valeur sémantique à l’arborescence. Dans cet exemple, le rôle des headings est de nommer les noeuds du document Web.

Les balises , , et sont les seuls éléments HTML5 permettant de sectionner un document ou une page Web. Cette faculté se traduit par la création des noeuds au sein de l’arborescence représentant les sections du document.

Il est donc impératif que ces balises comportent au minium un heading. Dans le cas contraire, la section créée ne sera pas nommée et restera donc comme indéfinie pour les agents logiciel. Une perte sémantique sèche !

Le syndrome

L’élément section est un des plus générique : il est utilisé afin de créer une section sur une thématique donnée au sein d’un document.

Et comme nous venons de le voir, cet élément doit être accompagné d’un heading pour faire sens aux yeux des agents logiciel.

Une section dans une section dans une section…

Alors pourquoi l’utiliser comme un simple élément?

supporte sans problème l’ajout d’attributs tels que les ID ou les class. Cela permet d’avoir le contrôle de son apparence.

Ok, mais pourquoi l’utiliser à tout va comme un simple élément d’habillage graphique ? Alors que l’on vient à peine de voir que ce dernier à une utilisation et un mode d’emploi bien spécifique.

Ce que je remarque fréquemment dans bon nombre de templates, tutoriels et Cie labellisés HTML5 est l’utilisation abusive de l’élément .

Un simple exemple :

Mon site

Titre de l'article

pourrait être remplacé par un élément , l’aspect final de la page serait le même.

Par contre, si nous analysons la structure sémantique du document, nous observons la création d’un noeud substituant la position enfant de l’élément :

Mon site (h1)
    |
    +-- Section indéfinie
            |
            +-- Titre de l'article (h1)

L’ensemble de la structure sémantique de la page Web est remise en cause. En plus de brouiller les pistes pour les agents logiciel, l’utilisation abusive des éléments alourdit le poids de votre code et augmente la profondeur d’imbrication de vos éléments. Les performances de votre site Web n’en seront que plus réduites.

Pour vos assurez de la bonne implémentation des nouveaux éléments sémantiques HTML5, je vous conseille d’utiliser l’outil en ligne HTML5 Outliner.

Conclusion

A l’aide de standards et en bâtissant un système capable de manipuler les données dans de bonnes conditions d’interopérabilité, le Web sémantique ouvre un accès intelligent à l’information.