Historique des technologies web

Les bases du web : HTML CSS JAVASCRIPT

Les technologies utilisées pour créer un site sont principalement le HTML, les CSS, et le JavaScript.

• HTML permet de coder le contenu d'une page. Il s'agit non pas d'un langage informatique mais de simples balises qui permettent de structurer le contenu. Par exemple, la balise <NAV> est le raccourci anglais pour "navigation". On ouvre cette balise, on insère le menu de navigation qui consiste souvent en liens sur des éléments de liste imbriqués, et on ferme cette liste. Le navigateur, qu'il s'agisse de Mozilla Firefox, Microsoft Edge, ou Google Chrome, reconnaît les balises HTML et les interprète. Voici un exemple de code complet pour le menu de navigation de ce site : <NAV><UL><LI><A HREF='https://www.omnireso.com'>Accueil</A></LI><LI><A HREF='https://www.omnireso.com/blog.php'>Blog</A></LI></UL></NAV>
  Les balises HTML ne sont pas censées définir l'apparence (le rendu visuel) d'un élément. Elles constituent la structure de la page, le fond, comprenant le contenu texte image vidéo etc. Certaines apportent un poids sémantique en mettant l'importance sur certains éléments structurels. Par exemple, la balise H1 indique au navigateur qu'il s'agit d'un titre de niveau 1. Le navigateur va donc afficher cet élément de façon plus proéminente que tout autre niveau de titre inférieur (HTML permet 6 niveaux de titre, de H1 à H6). Les robots des moteurs de recherche ont également pris en compte l'importance des différents poids sémantiques qui pouvaient être donnés dans une page. C'est la base du SEO : un titre se doit de refléter le sujet principale de la page, on l'encapsule donc au sein d'une balise H1 tandis que le ou les sous-titres utiliseront les niveaux H2, H3, etc.
• Les CSS ont là pour mettre en forme l'apparence visuelle des balises HTML. Si l'on souhaite un titre H1 affiché en couleur pourpre en police Courrier ou Comic Sans avec un cadre en pointillés, c'est avec les CSS que l'on va pouvoir spécifier toutes ces instructions au navigateur.
• JavaScript permet d'animer certaines parties de la page, certains contenus, permet l'interaction avec l'internaute, la vérification de saisie de champs de formulaire, etc.

Ces technologies reposent sur des normes et standards qui évoluent dans le temps. Ainsi, le code des pages web est composé de balises HTML, dont la première version, le HTML 1, a été définie en 1991. Au fur et à mesure les spécifications des possibilités de ces balises et la création de nouvelles balises permettant d'inclure dans les pages de plus en plus de fonctionnalités et de types de média ont donné lieu à de nouvelles normes : HTML 2.0 en 1995, HTML 3.2 en 1997 (la norme avec laquelle j'ai débuté mon parcours sur internet), HTML 4.0 fin 1997, xHTML 1.0 en 2000 Il est important de noter qu'xHTML n'est pas le successeur de HTML, c'est plutôt une adaptation du langage HTML au format XML.

En 2011 les webmasters du monde entier suivent de très près les évolutions du HTML5 (dont les premières spécifications ont commencé à faire parler d'elles en 2009); attendant impatiemment que cette nouvelle évolution soit validée comme standard.

En 2014, HTML5 est officiellement devenu un standard du web2. Il a introduit de nouvelles balises pour une meilleure structuration du contenu (comme article, section, nav, header, footer), l’intégration native de médias (avec video et audio), et des fonctionnalités pour les applications web (comme le stockage local).

Parallèlement, les feuilles de style et leur syntaxe ont connu leurs évolutions, avec la norme CSS 1.0 en 1996. Ce qui veut dire, au vu de la chronologie du HTML, que les pages de 1991 à 1996 étaient codées seulement en HTML, et que le formatage ou la mise en page étaient réalisés en balisage HTML. En 1997, la norme CSS 2.0 apporte une avancée considérable dans les possibilités données aux webmasters à ce sujet, et son évolution mineure, CSS 2.1, en 1998.

Il faut dire qu'il aura fallu plus de 13 ans pour que les éditeurs logiciels (Microsoft et son Internet Explorer en tête) décident de respecter et de mettre en application ces standards dans leurs navigateurs.

Actuellement, c'est la norme CSS 3.0 qui a provoquée un raz-de-marée dans l'univers du webdesign en apportant des améliorations significatives en matière de design et d’animation avec l’introduction de transitions, transformations, animations, ombres portées, arrondis, dégradés, etc.

Enfin, Javascript a connu lui aussi ses évolution, au fur et à mesure de l'avancée des navigateurs et de la technologie matérielle : en fabriquant des ordinateurs de plus en plus puissants (processeurs de calcul plus performants, support toujours plus important de mémoire vive), les créateurs de sites ont eu la possibilité de faire réaliser sur l'ordinateur de l'internaute de plus en plus d'opérations (traitement de formulaires, calculs arithmétiques, et plus récemment avec la (re)découverte de scripts asynchrones, Ajax proposant une interactivité accrue). Principales dates marquantes : ECMAScript 4 : 2007; ECMAScript 5 (ES5) : 2009 et ECMAScript 6 (ES6) : 2015

JavaScript et l’émergence des frameworks JavaScript a continué à évoluer avec l'introduction d’ECMAScript 6 (ES6) en 2015, qui a apporté de nouvelles fonctionnalités comme les classes, les modules, les promesses, les traits, etc. Alors que les webmasters connaissaient les librairies JS pour apporter certaines améliorations de traitement du DOM (par exemple avec JQUERY), des plateforme de développement Javascript sont apparues comme NODE.JS puis des frameworks, parmi lesquels AngularJS, ReactJS et Vue.js ont permis de développer des applications web complexes et performantes, le tout côté serveur.

Le recours de plus en plus systématique à ces frameworks JS nécessite un accompagnement SEO technique pour s'assurer que le code des pages web est bien traité par les robots des moteurs. Car même si Google a déployé d'immenses efforts ces 5 dernières années pour pouvoir interpréter la plus grande partie de code JS, c'est une étape coûteuse en temps de traitement (et donc allonge l'obtention de résultats dans les pages de réponses du moteur Google). Mais surtout, les autres moteurs comme Bing, Yandex ou Baidu n'interprètent que très peu de code JS. Et c'est sans compter les autres User-Agents possibles... Dans un souci d'accessibilité, il est donc fortement recommandé de mettre en place des mesures techniques comme le SSR et le caching pour les sites full JS.

L'ère du Headless et des API de services

APIs et microservices : l'utilisation d'APIs (Application Programming Interface) et de microservices a permis de créer des applications web plus modulaires et évolutives. Agissant comme de véritables interfaces, ces services permettent d'appeler des requêtes pour obtenir une donnée précise. Le tout sans avoir de front-office, c'est à dire qu'on requête avec un programme dédié et qu'on obtient une réponse que l'on met en forme et traite comme on le souhaite par la suite. Google propose par exemples des API pour les sites ayant une grande volumétrie de pages, ou pour effectuer certains traitements en masse.

Quels bénéfices pour le SEO ?

D'un point de vue global, on peut dire que l'UX et L'UI ont énormément bénéficié de ces évolutions technologiques. La sécurité a été également améliorée avec l'abandon de fonctionnalités qui pouvaient permettre à des pirates informatique de pénétrer illégalement dans des systèmes, comme les jeux de cadres (frameset et frames). Certaines autres évolutions invisibles pour l'utilisateur final, comme le protocole HTTP2, permettent de réduire le temps de chargement des ressources d'une page... C'est donc une amélioration globale apportée par les évolutions technologiques composant le web que l'on peut observer depuis ces dernières années. Plus spécifiquement, nous pouvons nous attarder sur certains aspects visibles :

Amélioration de l'expérience utilisateur

Accessibilité

Meilleure accessibilité : Les nouvelles versions des langages web intègrent des fonctionnalités favorisant l'accessibilité pour tous les utilisateurs, y compris ceux ayant des handicaps. Cela permet d'améliorer le score de "qualité" d'un site web et son positionnement dans les résultats de recherche. Certifié Opquast (référentiel assurance qualité web), je me sens particulièrement concerné car l'un des aspects du SEO est justement l'amélioration de cette accessibilité au plus grand nombre.

Vitesse de chargement

Sites web plus rapides: Les optimisations apportées aux langages et aux navigateurs permettent des chargements de page plus rapides. Cela améliore l'expérience utilisateur et le "crawl budget" d'un site web, ce qui est pris en compte par les algorithmes des moteurs de recherche.

Google a dédié une section entière de sa Google Search Console (anciennement Outils pour Webmasters) à des indicateurs de performances sur ces points de friction (pages lentes sur ordinateur, sur mobile), désormais connus sous le nom de Core Web Vitals.

Responsive Web Design

Sites web plus adaptables: L'accent mis sur le responsive design permet aux sites web de s'adapter à tous les types d'écrans, ordinateurs, tablettes et smartphones. Le responsive web design se concentre sur l'adaptation de la mise en page du site web aux différentes tailles d'écrans. C'est ensuite porté par la technologie (principalement CSS 3 avec une touche de Javascript le plus souvent). Annoncé pour être déployé en 2020 mais repoussé d'une année, l'index Mobile-First de Google désormais appliqué par défaut préfère les contenus lisibles sur tous supports. Cela favorise une meilleure expérience utilisateur sur tous les supports et participe à l'allongement du temps de visite sur vos pages ! Ressource Google : https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing?hl=fr

Sources de référence pour le web :

• W3C (World Wide Web Consortium): https://www.w3.org/
• IETF (Internet Engineering Task Force): https://www.ietf.org/
• ICANN (Internet Corporation for Assigned Names and Numbers): https://www.icann.org/
• IANA (Internet Assigned Numbers Authority): https://www.iana.org/
• Fondation Mozilla et ressources pour développeurs web : https://developer.mozilla.org/index.html

Rappel à toutes fins utiles : Google n'a pas créé le web. Google n'EST PAS le web. Google est une entreprise (Alphabet) côtée en bourse qui génère des revenus par le traitement et l'exploitation de ses bases de données constituées de sites web qui ne sont pas sa propriété, et par la vente de liens sponsorisés pour figurer dans ses pages de résultats de recherche de son moteur, d'espaces publicitaires pour figurer dans des sites partenaires. Ainsi que d'autres sources de revenus (commercialisation de ses Apis par exemple).