Toute personne impliquée dans la conception ou le développement Web aura rencontré le terme "sémantique" en référence à HTML5 et au Web en général. Ce terme souvent problématique est compréhensible pour beaucoup d'entre nous, d'autant plus qu'il existe un manque de consensus sur sa définition dans certains contextes.

Dans cet article, nous explorerons ce qui fait que HTML5 est plus sémantique que ses prédécesseurs, décrivant ce que cela signifie pour le développement Web, maintenant et dans le futur.

La sémantique concerne le sens

Le concept de sémantique provient du domaine de la linguistique dédié à l'étude du sens. Avec des langages naturels tels que l'anglais, on distingue la syntaxe (ou la grammaire) et la signification. Si vous pensez à une phrase, cela signifie que les gens l'interprètent:

"L'homme a jeté l'ordinateur par la fenêtre."

La sémantique concerne l’aspect de la phrase qui permet aux personnes qui la lisent de comprendre le message qu’elle contient. Avec la syntaxe, la sémantique est une grande partie de ce qui facilite la communication via le langage. Lorsque nous parlons de sémantique par rapport à HTML, nous parlons de la communication entre les programmes informatiques, pas des humains. Le HTML sémantique vise essentiellement à améliorer la capacité des applications à traiter ou à interpréter le contenu Web. Par exemple, considérons l’extrait de page Web suivant contenant certaines des structures HTML les plus anciennes:

The man threw the computer through the window.

Les éléments (et attributs) donnent au navigateur des informations sur la manière de présenter le contenu à l'utilisateur. Les éléments de paragraphe seront affichés par défaut avec des espaces au-dessus et au-dessous d'eux, les éléments d'image sont affichés à l'aide du fichier image inclus dans l'attribut src, etc. Lorsque le navigateur rencontre chacun de ces éléments, il rend le contenu d'une manière particulière qui est déterminée par les balises utilisées.

Les structures HTML ont déjà un sens

Il est important de comprendre que HTML5 n'introduit pas la sémantique au HTML pour la première fois. HTML avait déjà un niveau de sémantique intégré. Les structures HTML existantes ont un sens différent. Si vous regardez cet élément HTML familier tel qu’il est inclus dans l’extrait ci-dessus, vous verrez ce que je veux dire:

Bien qu'il soit abrégé, le nom de l'élément img indique quelque chose de significatif sur le contenu de la balise, c'est-à-dire qu'il s'agit d'une image. De cette manière, l’aspect sémantique de HTML est similaire à celui des métadonnées, dans la mesure où les noms d’élément et d’attribut décrivent les données (les données d’une page Web étant le contenu de l’élément et de l’attribut).

Rappelez-vous quand nous avons commencé à séparer le contenu du style?

Certaines des structures utilisées en HTML indiquent au navigateur comment styliser les éléments de contenu dans une page. Au fil du temps, nous avons été encouragés à séparer le formatage d'une page de son contenu.

Par exemple, nous avons remplacé la balise i par em, ce qui est plus significatif et ne dit pas exactement au navigateur comment afficher le texte dans l'élément. Le but de l'utilisation de em plutôt que i est de transmettre des informations sur la nature de l'élément de contenu, plutôt que des informations sur le style. Bien sûr, le em affecte le style, ce qui est la raison principale pour laquelle nous l'utilisons, mais il laisse les détails du style au navigateur et / ou au code CSS idéalement séparés du balisage de la page.

Le sémantique HTML5 est une étape plus importante dans ce processus. Le but ultime est de créer un système dans lequel les applications ont accès à un niveau de signification supérieur. Ce n’est pas une IA, mais seulement des informations descriptives sur les éléments de données dans les structures de code qui les modélisent.

N'est-ce pas similaire à XML?

Si vous avez déjà utilisé XML, vous serez familiarisé avec les concepts du balisage sémantique. Par exemple, lorsque vous concevez un document XML (ou un schéma) pour un jeu de données, vous choisissez des éléments et des attributs pour modéliser des éléments dans les données. Idéalement, les noms d'éléments et d'attributs définissent les éléments de données de manière significative:

Jim Smith23 November 2012

Le développeur a choisi des noms décrivant intuitivement les valeurs de données modélisées. Avec HTML5, vous ne pouvez pas choisir vos propres éléments, car ils ne sont pas librement extensibles. Les structures choisies pour cela ont simplement une signification plus inhérente par rapport aux versions précédentes.

En passant, il existe différents types de signification

Nous avons parlé de sens, mais en réalité, un élément ou un autre extrait de code peut avoir un sens.

La balise img a un sens car elle raconte quelque chose sur le contenu de l'élément, décrivant ce que c'est.

Certains des nouveaux éléments HTML5, tels que l'en-tête et le pied de page, sont significatifs en ce sens qu'ils indiquent quelque chose sur le rôle ou le but de l'élément dans la structure globale d'une page.

Comment tout cela se rapporte-t-il au code HTML5 alors?

Alors, qu'est-ce que cet aspect significatif amélioré de HTML5 implique? Essentiellement, HTML5 contient de nouveaux éléments avec lesquels vous pouvez inclure plus d'informations sémantiques dans votre balisage de page. Il y a beaucoup de nouveaux éléments, dont quelques-uns seulement seront examinés ici. La balise header indique des informations sur le contenu de l'élément et sur son rôle dans la structure de la page:

Man in Window Outburst

L'élément d'en- tête peut contenir d'autres éléments et a tendance à inclure au moins un élément de titre. La balise de bas de page est similaire, la balise exprimant à nouveau quelque chose de significatif sur le contenu de l'élément et sa relation avec le reste de la page:

La balise de navigation décrit le but d'une section de page, c'est-à-dire qu'elle contient des liens de navigation:

L'élément section contient généralement un groupe d'éléments sur le même thème, souvent associé à un en-tête. L'élément de section a une signification plutôt abstraite, mais il est néanmoins significatif:

What happened
Police officers apprehended the man at 3.30pm...

L'élément article est similaire, utilisé pour définir un élément autonome:

The Law
The law on throwing items through windows is very clear...

Une balise side indique le rôle d'un élément par rapport à son contexte dans la page, comme dans la version étendue suivante du code d'article ci-dessus:

The Law
The law on throwing items through windows is very clear...

Ce ne sont là que quelques-uns des nouveaux éléments HTML5 offrant des améliorations sémantiques, d'autres incluent des éléments de saisie multimédia et utilisateur, ainsi que des attributs supplémentaires. L'inclusion de micro-données dans HTML5 offre également une possibilité accrue d'inclure des informations sémantiques dans les pages Web et les applications. Comme vous pouvez le constater, certains de ces nouveaux éléments sont significatifs en termes de contenu et de structure.

Pensez à certaines des anciennes balises (dont beaucoup sont encore présentes), telles que div. L'élément div est simplement un morceau de page - le nom du tag ne nous dit absolument rien sur le contenu de l'élément ou son rôle dans la page. En d'autres termes, la balise n'a que très peu de sens. Beaucoup d'étiquettes de longue date ne transmettent pratiquement aucun sens ou, dans certains cas, une signification générique et mal définie. Chaque élément d'une page Web était contenu dans un ensemble de catégories d'éléments très généraux. La clé pour rendre quelque chose de significatif est d'être spécifique. Les nouvelles balises HTML5 nous permettent de définir le contenu Web en utilisant des termes plus spécifiques.

Avez-vous déjà ajouté un sens à votre balisage?

Si vous créez des pages Web pour une durée raisonnable, certains des nouveaux éléments HTML5 peuvent vous intéresser. En réalité, les développeurs construisaient déjà un niveau de signification dans leurs pages en utilisant les attributs d'élément, en particulier la classe et l'ID. Par exemple, si vous avez déjà donné à un élément un attribut de classe ou d'ID "footer" ou "header", vous n'êtes certainement pas seul. Avec HTML5, cette signification est véhiculée dans le balisage lui-même plutôt que dans les valeurs d'attribut. Si vous utilisiez ces attributs pour implémenter des propriétés de style particulières, vous faisiez effectivement quelque chose de manuel intégré à HTML5 - et avec des éléments sémantiques, vous bénéficiez d'avantages supplémentaires ...

Pourquoi faisons-nous tout cela?

OK, tout va très bien, mais il ne faut pas oublier que nous nous demandons pourquoi nous faisons tous ces problèmes pour quelque chose qui semble essentiellement conceptuel / académique. Eh bien, vous pouvez être assuré qu'il y a de bonnes raisons de vous diriger dans une direction plus sémantique. Comme nous l'avons vu, la sémantique HTML5 nous permet de créer un code de balisage qui décrit les éléments de contenu. Cet aspect descriptif du code permet aux autres programmes d’utiliser plus efficacement le contenu, avec diverses applications:

• La possibilité de recherche doit être transformée par les progrès de la sémantique Web. Le balisage sémantique rend le contenu / les données plus consultables. Les pages Web ne sont bien sûr pas seulement affichées dans le navigateur Web, elles sont également traitées par d’autres programmes tels que les robots des moteurs de recherche. Étant donné que le balisage sémantique est conçu pour permettre aux applications d’interpréter les pages Web de manière plus significative, cela devrait améliorer considérablement la qualité des fonctions de recherche / requête. Dans le «rêve» de Tim Berners-Lee souvent cité pour le Web, les ordinateurs seraient capables d’analyser toutes les données en ligne, ce qui pourrait être loin, mais l’orientation sémantique de HTML5 est motivée par ce type d’objectif à long terme. .
• L'accessibilité est l'un des principaux avantages du balisage sémantique. Les outils d'accessibilité peuvent grandement bénéficier d'un accès plus significatif au contenu Web. Ces outils incluent des ajouts de navigateur pour les utilisateurs ayant une vision restreinte, une audition, des difficultés d'apprentissage, etc. Le balisage sémantique permet à une application de traiter le contenu Web et le résultat de communiquer le message original à l'utilisateur d'une manière adaptée à ses besoins. Ce concept s'étend au-delà de l'accessibilité et dans les domaines de la flexibilité des appareils, grâce à des techniques telles que la conception adaptative. Le résultat est une approche plus inclusive de la diffusion de contenu Web.
• La cohérence devrait être un véritable bienfaiteur de HTML5 sémantique. Le balisage sémantique améliore la cohérence, car les éléments de contenu sont plus logiquement assignables à des types d'éléments particuliers. Cela contraste avec les anciens modèles, dans lesquels les éléments pouvaient souvent être logiquement contenus dans différents types d’éléments - en choisir un n’était pas un indicateur de la nature du contenu ou de son rôle dans la page. était juste le reflet du choix du développeur. Avec le balisage sémantique, le niveau de signification plus spécifique rend ces choix moins gratuits, mais les résultats sont intrinsèquement plus fiables lorsqu'il s'agit d'interprétation, que ce soit par le navigateur ou par d'autres applications.

Les développeurs pilotent les progrès des technologies Web

Lorsque j'étais à l'université (il y a quelques années), je me souviens qu'un conférencier nous disait que le domaine de la recherche universitaire allait être révolutionné par les progrès de la recherche. Il parlait du Web sémantique - inutile de dire que cela ne s’est pas encore produit. Prendre une nouvelle direction ciblée avec quelque chose d'aussi varié et erratique que le World Wide Web sera toujours une tâche difficile. Cependant, en intégrant au moins l'idée du balisage sémantique, nous, développeurs, pouvons agir pour influencer le mouvement vers un futur Web plus accessible, consultable et cohérent pour tous les utilisateurs.

Utilisez-vous les éléments sémantiques de HTML5? Se concentrer sur la sémantique produit-il un produit de meilleure qualité? Faites-nous savoir ce que vous pensez dans les commentaires.

Image / vignette en vedette, utilise l' image de la langue via Shutterstock.