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

Le temps où l’intégration HTML était un métier un peu obscur, traité en bout de chaîne d’un projet web est définitivement révolu. Désormais, les développeurs front-end sont une des pierres angulaires de tout projet web.

On se repose sur leur expertise pour évaluer la faisabilité technique d’un design web, son interprétation sur smartphone ou ordinateur, les technologies à utiliser, l’UX...

Ce métier vient également avec son lot de responsabilités : accessibilité, SEO, webperf, éco-conception, sécurité, assurance qualité... le panel de compétences nécessaires n’a jamais été aussi large !

Et pourtant, il est facile de perdre de vue les fondamentaux de ce métier. En cette période où il existe autant de frameworks JS que de développeurs web, il est bon de revenir à l’essentiel : l’HTML et le CSS.

L’HTML avant tout

Parler aux machines et aux humains

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.

Exemple n°1 Déclarer un élément de navigation

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.
<nav class="menu" aria-label="Principale" role="navigation">
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Exemple n°2 Structurer les titres

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 page1, 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.
<h1>Une agence web à Reims</h1>
    <h2>Notre spécialité : les projets web à 5 pattes</h2>
        <h3>Création de sites internet</h3>
        <h3>Développements web sur-mesures</h3>
    <h2>Des services pointus</h2>
        <h3>Audits (UX, assurance qualité, RGPD, SEO...)</h3>
        <h3>Hébergement et infogérance</h3>

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.

Exemple n°3 Afficher une image

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 :

<picture>
    <source media="(max-width: 575px)" srcset="ourson-grosplan-mobile.webp, ourson-grosplan-mobile-retina.webp 2x" type="image/webp">
    <source srcset="ourson.webp" type="image/webp">
    <source media="(max-width: 575px)" srcset="ourson-grosplan-mobile.jpg, ourson-grosplan-mobile-retina.jpg 2x" type="image/jpeg">
    <source srcset="ourson.jpg" type="image/jpeg">
    <img src="ourson.jpg" alt="Un ourson qui lèche un pot de miel" width="800" height="400" importance="high" loading="lazy">
</picture>
  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 recherche1.
Tant d'efforts pour afficher cette photo, mais ça en valait la peine non ?
Tant d’efforts pour afficher cette photo, mais ça en valait la peine non ?

L’HTML comme socle

Ces trois exemples peuvent paraître anecdotiques, mais ils sont révélateurs d’une complexité et d’une importance qui ne peuvent pas être mises sous le tapis. Le Web s’est construit autour de l’HTML. Il est indispensable de maîtriser parfaitement ce socle pour construire un site internet.

Un usage erroné ou parcellaire de la sémantique HTML peut dégrader l’expérience de vos visiteurs, qu’ils soient humains ou non.

<article> ou <section> ?

smashingmagazine.com/2022/07/a

Cet article d’Olushuyi Olutimilehin illustre parfaitement les difficultés qu’on peut rencontrer à réaliser une construction HTML correcte. Savoir faire le bon choix des éléments à utiliser n’est pas une compétence innée, elle s’acquiert par la pratique et par une connaissance approfondie des 130+ éléments HTML à disposition.
<article> vs. <section> : How To Choose The Right One

l’HTML bouge encore

On pourrait croire que l’HTML est figé dans le temps, mais c’est loin d’être le cas et, aujourd’hui encore, de nouveaux éléments ou attributs font leur apparition. Comme pour le CSS et le Javascript une veille régulière est nécessaire !

Il existe plus de 130 éléments HTML. Chacun possède sa finalité précise.

Voici deux petits jeux pour tester ses connaissances :

Le CSS ensuite

Vingt fois sur le métier remettez votre ouvrage

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.

CSS Variable Secrets par Lea Verou au CSS Day 2022

Lea Verou nous offre une plongée en profondeur dans les variables CSS. Cette conférence illustre parfaitement l’état actuel de CSS par le biais d’une seule de ses spécificités. CSS se complexifie et s’enrichit continuellement, ainsi il ouvre des portes vers de nouvelles manières d’approcher un même problème.

Polissez-le sans cesse, et repolissez-le

Voici quelques liens qui mettent en valeur les évolutions récentes ou à venir de ce language :

On pourrait presque se demander si, dans un avenir proche, de nouveaux métiers autour de CSS ne vont pas apparaître. Ces dernières années ont vu des spécialités émerger autour de JavaScript du fait de ses nouveaux usages et du besoin d’avoir des spécialistes dans ces domaines précis.

Alors pourquoi pas des « Spécialistes [Animations/Shaders/System Design/...] pour CSS » dans un futur proche ?

Une chose est sûre : peu importe la maîtrise de chacun autour de CSS, elle ne peut s’exprimer correctement que sur un socle HTML solide. Les deux marchent main dans la main.

Et le Javascript dans tout ça ?

Ajoutez quelquefois, et souvent effacez

JavaScript a pris une place démesurée dans le Web, à tort ou à raison. On peut toutefois constater que son usage pour le développement front-end est en train de changer.

Les évolutions récentes d’HTML et CSS permettent de se passer de JavaScript là où il était nécessaire d’y recourir jusqu’à présent :

Tout n’est pas encore parfait. Loin de là.
Ce n’est pas non plus la fin de JavaScript, loin s’en faut. On pourra toujours se reposer sur lui pour pallier les faiblesses actuelles d’HTML/CSS. Que ce soit pour déclencher des animations via l’API Intersection Observer, manipuler le DOM à la volée, ou même améliorer l’accessibilité de certains composants... JavaScript est et restera un allié primordial pour le développement front-end.

Néanmoins, il s’agit d’une métamorphose majeure de l’éco-système qui va probablement se poursuivre ces prochaines années. Il est peut-être temps d’intégrer dans nos esprits qu’il est tout à fait possible de créer des sites internet beaux et propres avec peu, ou pas de JS du tout.

Une période charnière pour le développement front-end

Nous voilà à un moment particulier où il est légitime de s’interroger sur les fondamentaux de notre métier :

  • HTML est, plus que jamais, un socle élémentaire. Nos pages sont-elles construites correctement, pour tous nos utilisateurs, humains ou non ?
  • CSS évolue rapidement et se complexifie. Est-ce que l’on prête suffisamment attention à ces évolutions ?
  • JavaScript, reste une boîte à outils extraordinaire, mais semble moins vital que ces dernières années. N’y a t’il pas des alternatives en HTML ou CSS à certaines problématiques que l’on rencontre régulièrement sur nos projets web ?

Une chose est sûre, le développement front-end est un métier passionnant qui se réinvente sans cesse !

Le sage (HTML), le peintre (CSS) et le jongleur (JavaScript) - L'Agence Tous Risques du Web
Le sage (HTML), le peintre (CSS) et le jongleur (JavaScript) - L’Agence Tous Risques du Web

Vous cherchez une agence web qui
aime le développement front-end ?

Ça tombe bien, on adore ça. Et, vous l’aurez deviné en lisant cet article, nous accordons autant d’importance à l’HTML qu’à CSS et JavaScript, comme il se doit.

info@alphamosa.fr
Tél. 03 26 48 17 56