Sur la sémantique du Web

Lundi 16 juillet 2012

Dans le contexte du développement web, la sémantique fait référence au balisage sémantique, c’est-à-dire un balisage utilisé conformément à sa signification et à son objectif.

Un balisage utilisé conformément à son objectif signifie l’utilisation d’éléments de titre (par exemple, h1
to h6) pour baliser les titres, d’éléments de paragraphe (p) pour les paragraphes, de listes
(ul, ol, dl, ainsi que datalist ou
menu) pour les listes, de tableaux pour les données tabulaires, et ainsi de suite.

Énoncer l’évidence est devenu nécessaire à l’époque où le Web ne comptait que quelques sites web et où les auteurs utilisaient des tableaux pour coder des sites entiers, des cellules de tableau ou des paragraphes pour les titres, et imaginaient d’autres moyens créatifs pour obtenir la mise en page souhaitée. (Il faut admettre que ces auteurs avaient moins d’instruments à leur disposition que les auteurs d’aujourd’hui. Il fut un temps où coder une mise en page à trois colonnes était littéralement impossible sans utiliser de tableaux ou d’images.)

Jusqu’à aujourd’hui, les auteurs n’ont pas toujours été certains de l’élément HTML à utiliser pour chaque unité fonctionnelle de leur page HTML, et les spécifications « vivantes » comme HTML 5 exigent des auteurs qu’ils gardent un œil sur les éléments qui existeront à l’avenir pour baliser ce qui nécessite autrement des éléments de secours « dénués de sens » tels que div ou span.

.
Pour savoir quels éléments HTML propose et quelle est leur signification, il est nécessaire de consulter les spécifications HTML. Il existe des index — couvranttoutes les spécifications et tous les éléments HTML
— qui facilitent un peu la recherche et la découverte de la signification d’un élément. Cependant, dans de nombreux cas, il peut être nécessaire de vérifier ce que
la spécification HTML

indique.
Par exemple, prenons the code:

element L' code

élément représente un fragment de code informatique. Il peut s’agir du nom d’un élément XML, d’un nom de fichier, d’un programme informatique ou de toute autre chaîne qu’un ordinateur reconnaîtrait.

Sémantique contrôlée par l’auteur
Les éléments HTML portent un sens défini par les spécifications HTML, mais les noms d’ID et de classe peuvent également porter un sens. Les noms d’ID et de classe, tout commemicrodata
,
sont généralement sous le contrôle de l’auteur, la seule exception étantmicroformats

. (Nous ne couvrirons pas les microdonnées ni les microformats dans cet article.)

• Les noms d’ID et de classe donnent aux auteurs beaucoup de liberté pour travailler avec les éléments HTML. Il existe quelques règles empiriques de base qui, lorsqu’elles sont suivies, garantissent que cette liberté ne se transforme pas en problèmes :
• Limitez l’utilisation des ID et des classes au minimum.Utilisez des noms d’ID et de classe fonctionnels
• ;
  si ce n’est pas possible, utilisez des noms d’ID et de classe génériques.

Utilisez des noms aussi courts que possible mais aussi longs que nécessaire.

Avantages de l’utilisation du balisage sémantique

• Utiliser le balisage conformément à son usage prévu, ainsi qu’une utilisation modeste de noms d’ID et de classe fonctionnels, présente plusieurs avantages : C’est la chose professionnelle
• à faire.
• C’est plus accessible.

C’est plus facile à maintenir.

Cas particuliers

Les éléments « neutres », les éléments à signification ambiguë et les éléments de présentation constituent des cas particuliers. div et span

offrent un « mécanisme générique pour ajouter de la structure aux documents ». Ils peuvent être utilisés chaque fois qu’aucun autre élément disponible ne correspond à ce que représente le contenu en question. b, Dans le passé, beaucoup de confusion a été causée par les éléments,
istrong et em b . Les auteurs ont maudit i et pour leur aspect présentatif, et suggéraient généralement un remplacement 1:1 par strong
etem
. Sans vouloir remuer le passé, voici ce que dit HTML 5, conférant aux quatre éléments une:

<p><em>Cats</em> are cute animals.
Enfin et surtout, il existe de véritables éléments de présentation. Ces éléments seront pris en charge par les agents utilisateurs (navigateurs) pour toujours, mais ne devraient plus être utilisés car
le balisage de présentation n’est pas maintenable,
et devrait plutôt être géré par des feuilles de style. En voici quelques-unes populaires :

• centre
• police
• s
• u

Comment savoir si vous êtes sur la bonne voie

Une méthode simple et rapide pour vérifier la sémantique de votre page et comprendre comment elle peut être
interprétée par un lecteur d’écran est de désactiver CSS, par exemple en utilisant l’extension Web Developer Toolbar
disponible
pour Chrome
et Firefox.
Cela n’identifie que les problèmes liés à l’utilisation du CSS pour transmettre du sens, mais peut tout de même s’avérer utile.

D’autres méthodes vont des revues par les pairs (bonnes pratiques de codage) aux tests utilisateurs (accessibilité).

À faire et à ne pas faire

Le tableau suivant donne un aperçu global de certaines des mauvaises pratiques en matière de
rédaction HTML, ainsi que les alternatives correctes et une brève explication.

Écrit par
Jens O. Meiert,
Architecte Web Senior, Équipe Google Webmaster