Développement front-end
au cœur des métiers du web

Plus que jamais, l’usage d’une sémantique HTML correcte permet de parler correctement aux machines comme aux humains (robots d’indexation, navigateurs, lecteurs d’écrans...).

Voici trois exemples qui illustrent les enjeux et l’importance d’une syntaxe HTML correcte et précise.

Un premier exemple simple : déclarer sémantiquement une section de navigation en utilisant un élément <nav> permet de résoudre deux problèmes :

1. Accessibilité : cette section est destinée à la navigation dans le document ; elle sera détectée comme telle par les outils d’aide à l’accessibilité web. À noter que l’attribut aria-label permet aux lecteurs d’écran de préciser de quelle navigation il s’agit.
2. SEO : on indique aux robots l’intérêt et le comportement associé à la liste de liens inclus dans cette section.

Les éléments de titre de section hX sont essentiels pour donner des indications quant à l’imbrication des textes et contenus qu’ils introduisent.

Là aussi, les conséquences sont importantes pour le référencement naturel et l’accessibilité. Il convient de savoir les utiliser convenablement en respectant les règles du standard HTML :

• Ne pas sauter de niveaux d’intertitre, un <h3> suivra un <h2>...
• L’imbrication des intertitres doit suivre une logique évidente, pour les visiteurs comme pour les robots d’indexation.
• Un élément de titre décrit brièvement le sujet de la section qu’il introduit.
• Même si HTML 5 permet l’usage de plusieurs titres de premier niveau <h1> dans une page¹, on se limitera à l’usage d’un seul titre de niveau 1, au moins pour ne pas provoquer de crise cardiaque anticipée sur vos collègues attaché(e)s au SEO.

Ce seul élément HTML, correctement utilisé, permet plusieurs choses :

1. UX : apporter une information visuelle, identifiable et cohérente, pour les visiteurs qui survolent la page. Les contenus textuels apparaissent comme structurés, on aide les visiteurs à trouver l’information qu’ils recherchent.
2. Accessibilité : les lecteurs d’écran identifient ces titres et leurs imbrications. Une structure correcte permet donc une navigation simplifiée pour les personnes qui utilisent ces dispositifs.
3. SEO : les moteurs de recherche distinguent ces titres des autres textes de la page. Comme un utilisateur réel, l’algorithme du moteur de recherche va accorder à ces titres plus de « poids » et associer ces entêtes aux contenus qui les suivent.

Terminons par un exemple plus complexe.

On pourrait penser qu’on a, depuis longtemps, surmonté tous les problèmes autour de l’affichage des images pour le Web. Difficile d’imaginer une page web sans image, ça doit être simple et évident, non ? Manque de chance, il s’agit probablement de l’élément HTML le plus complexe à maîtriser.

Voici un exemple de code d’intégration pour une image :

1. UX : les éléments <source> permettent de définir des alternatives Retina pour les écrans supportant ce format. Ils ont également l’avantage de nous autoriser à proposer une direction artistique différente en fonction de la taille d’écran de l’utilisateur. Ainsi, nous pourrons faire un plan large du sujet lorsque la page est consultée depuis un ordinateur, et un gros plan sur celui-ci sur smartphone. L’usage des attributs width et height donne des indications précieuses aux navigateurs pour calculer la place que prendra l’image une fois qu’elle sera chargée. Indiquer cette information évite un affichage « par étapes » de la page, ce qui est très désagréable pour le visiteur.
2. Webperf : L’attribut loading="lazy" permet aux navigateurs de charger l’image uniquement s’ils pensent qu’ils vont avoir besoin de l’afficher. Les éléments <source> proposent aux navigateurs différents formats d’image. Ils utiliseront le premier qu’ils savent prendre en charge avec, à la clé, une réduction des données à télécharger (par exemple en chargeant l’image au format WebP plutôt que celle au format JPEG).
3. Accessibilité : l’attribut alt décrit l’image pour les personnes qui ne peuvent pas la voir (totalement ou partiellement). Le sujet des alternatives textuelles est vaste et important.
4. SEO : l’attribut alt sera utilisé pour l’indexation de l’image. L’usage de formats modernes (WebP, AVIF) améliore les performances web, ce qui peut avoir une influence positive sur le classement de la page dans les résultats des moteurs de recherche¹.

CSS est un langage qui progresse et cela n’a jamais été aussi vrai que ces dernières années. L’arrêt d’Internet Explorer et la convergence des autres navigateurs vers un meilleur support de CSS font de l’année 2022 une période particulièrement propice aux évolutions.

Impossible de résumer en quelques lignes les avancées de CSS de ces dernières années, ce serait une entreprise vaine et caduque à très court terme. On peut néanmoins souligner la nécessité d’une veille constante nécessaire au perfectionnement, peut-être encore plus à l’heure actuelle qu’avec HTML ou JavaScript.