Qu’est-ce que le HTML5 ? Le HTML5 n’est pas juste le successeur du HTML 4, il est bien plus que ça ! Alors que les langages HTML 4 et autres XHTML se concentraient juste sur le contenu des pages Web, le HTML5 se focalise sur les applications Web et l’interactivité, sans toutefois mettre de côté l’accessibilité et la sémantique. Le HTML5 se positionne également comme concurrent des technologies Flash et Silverlight ! Le HTML5, ce n’est pas que des nouveautés. Le HTML5 apporte également son lot d’API JavaScript, qui permettent de faire des choses assez intéressantes jusqu’alors peu ou pas possibles. Repensée et enrichie, la version du langage HTML de 2014 est adaptée aux besoins du marketing et du référencement naturel. Les nouveaux éléments et attributs structurent le contenu des sites web contemporains. Passons en revue les apports de ce langage.
#1 Définition du mot HTML5
Le HTML5, pour HyperText Markup Language 5, est une version du fameux format HTML utilisé pour concevoir les sites Internet et dont nous vous avons parlé dans un précédent article. Celui-ci se résume à un langage de balisage qui sert à l’écriture de l’hypertexte indispensable à la mise en forme d’une page Web. Lancée en octobre 2014, cette version HTML5 apporte de nouveaux éléments et de nouveaux attributs par rapport à la version précédente. Elle offre par exemple la possibilité de définir le contenu principal d’une page Web, d’ajouter une introduction en header, d’insérer un sous-titre à un contenu multimédia de type vidéo, etc.
Le HTML5 est un format de langage développé par le W3C (World Wide Web Consortium) et le WHATWG (Web Hypertext Application Technology Working Group). En attendant les successeurs du HTML5, qui ne porteront sans doute pas de numéro, deux nouvelles versions sont parues : la version HTML5.1 a paru en 2016 et HTML5.2 en 2017.
Attention, dans les propos des webmasters, le terme HTML5 regroupe souvent plusieurs technologies destinées notamment au développement d’applications : HTML5, CSS3 et JavaScript. On parle aussi de DHTML : Dynamic HTML, en référence à ces technologies qui rendent les pages web aptes à se modifier au fil de la consultation, directement sur le navigateur web.
Accessibilité et sémantique
Le HTML5 apporte désormais de nouveaux éléments comme <nav>, <header>, <article>, <figure>… qui améliorent l’accessibilité, ainsi que des éléments comme <mark> ou <data> qui améliorent la sémantique (c’est-à-dire le sens qu’on donne aux textes).
Applications Web et interactivité
Mais l’intérêt majeur de ce langage porte sur les applications Web et l’interactivité ! Le HTML5 apporte de nombreux éléments comme <video>, <datagrid>, <meter>, <progress>, <output>… ainsi que de nouveaux types pour les éléments <input>, comme tel, url, date, number…
Mais ce n’est pas tout ! Le HTML5 spécifie aussi un certain nombre d’API JavaScript. Ces API JavaScript sont des techniques que nous allons pouvoir utiliser pour développer des applications Web et ajouter de l’interactivité. Parmi ces API JavaScript, on trouve par exemple l’API Drag & Drop, qui va nous permettre de réaliser des glisser-déposer de façon assez simple.
Concurrencer Flash (et Silverlight)
Le Flash a souvent été décrié car peu accessible, lourd, et nécessitant un plugin appelé Flash Player. Mais le Flash avait l’avantage de faciliter la lecture de contenus multimédias, de façon quasi multiplateforme et sur tous les navigateurs, ce que ne permettait pas le HTML. En HTML, il a toujours été possible d’insérer du contenu multimédia avec l’élément <embed>, mais l’utilisateur devait disposer de certains plugins en fonction du format de la vidéo lue (QuickTime, Windows Media Player, RealPlayer…). Bref, au niveau du multimédia, le Flash mettait tout le monde d’accord !
Le HTML5 se place en concurrent du Flash, en fournissant des outils analogues de façon native : <video>, <audio> et surtout <canvas>. Il est donc possible dès à présent de lire des vidéos en HTML5 sans nécessiter ni Flash, ni un autre plugin contraignant. L’élément <canvas> permettra de dessiner et donc de réaliser des animations, comme on le ferait avec Flash et Silverlight !
#2 Les API JavaScript de HTML5
Pour rappel : Nous vous parlons d’API depuis le début de cet article, mais cet acronyme est peut être obscur pour vous. API signifie « Application Programming Interface ». Une API, dans le cadre d’une utilisation en JavaScript, est un ensemble d’objets, de méthodes et de propriétés réunis sous un même thème. Si on considère l’API Drag & Drop, il s’agit d’un ensemble d’objets, de propriétés, de méthodes et même d’attributs HTML qui permettent de réaliser des glisser-déposer (drag and drop en anglais). Pour approfondir, n’hésitez pas à consulter notre article dédié : API, késako ?
Nous allons rapidement faire le tour des différentes API apportées par le HTML5.
Anciennes API désormais standardisées ou améliorées :
– History : gérer l’historique
Avec le JavaScript, il a toujours été possible d’avancer et de reculer dans l’historique de navigation, c’est-à-dire simuler l’effet des boutons Précédent et Suivant du navigateur. L’API History permet désormais de faire plus, notamment en stockant des données lors de la navigation. Cela est utile pour les applications basées sur l’AJAX, où il est rarement possible de revenir en arrière.
– Sélecteurs CSS : deux nouvelles méthodes
Le HTML5 apporte les méthodes querySelector() et querySelectorAll(), qui permettent d’atteindre des éléments sur base de sélecteurs CSS, dont les nouveaux sélecteurs CSS3 !
– Timers : rien ne change, mais c’est standardisé
Le HTML5 standardise enfin les fonctions temporelles, comme setInterval(), clearInterval(), setTimeout() et clearTimeout(). Le HTML5 propose également une série de nouvelles API, pour la plupart sous JavaScript, qui peuvent être implémentées sur tous les navigateurs.
Voici quelques exemples d’API ajoutées pour HTML5 :
– Canvas :
Introduite par Apple au sein de son navigateur Safari et permet de « dessiner » en JavaScript, en 2D via la balise <canvas> et d’ajouter du contenu 3D sur les pages avec les API tierces WebGL et Khronos Group. Pour cela, il faut utiliser le nouvel élément HTML5 <canvas>.
– Drag & Drop :
Cette API est issue d’Internet Explorer et permet de réaliser des glisser-déposer de façon relativement simple, sous l’attribut <draggable>.
– File :
Celle-ci permet de manipuler les fichiers de manière standard, sans passer par une quelconque extension navigateur.
– Audio/Video :
Rien de bien complexe ici, ces API servent à activer des contenus audio et vidéo via les balises <audio> et <video>, également nouvelles applications hors connexion : l’Application cache.
– ContentEditable :
ContentEditable est une technique, conçue par Microsoft pour Internet Explorer, qui permet de rendre éditable un élément HTML. Cela permet à l’utilisateur d’entrer du texte dans un <div>, ou bien de créer une interface WYSIWYG (What You See Is What You Get, c’est-à-dire « ce que vous voyez est ce que vous obtenez »), comme Word. Fonctionne avec le nouvel attribut <contenteditable>
– Web Storage
Le Web Storage est, d’une certaine manière, le successeur des fameux cookies sans pour autant les remplacer en offrant une amplitude largement supérieure aux versions précédentes. Cette API permet de conserver des informations dans la mémoire du navigateur, pendant le temps que vous naviguez, ou pour une durée beaucoup plus longue. Les cookies fournissent plus ou moins 4 KB de stockage, alors que le Web Storage en propose 5 MB pour la plupart des navigateurs et 10 MB pour Internet Explorer. Cependant, le Web Storage n’est pas accessible par les serveurs Web, les cookies sont donc toujours de rigueur.
– Web SQL Database
On peut la considérer comme une évolution du Web Storage. Le Web Storage ne permet que de stocker des valeurs sous forme de clé, alors que le Web SQL Database fournit une base de données complète ! C’est aussi plus compliqué à utiliser, d’autant plus que Firefox ne l’implémente pas et utilise un autre type de base de données : IndexedDB.
– WebSocket
Le WebSocket permet à une page Web de communiquer avec le serveur Web de façon bidirectionnelle : ça veut dire que le serveur peut envoyer des informations à la page, tout comme cette dernière peut envoyer des informations au serveur. C’est en quelque sorte une API approfondie du XMLHttpRequest. C’est plus complexe, car cela nécessite un serveur adapté.
– Géolocalisation
L’API de géolocalisation permet, comme son nom le laisse entendre, de détecter la position géographique du visiteur. Mais attention, cela ne fonctionne que si l’utilisateur donne son accord, en réglant les paramètres de navigation de son navigateur.
– Workers et Messaging
L’API Workers permettent d’exécuter du code en tâche de fond. Ce code est alors exécuté en parallèle de celui de la page. Si le code de la page rencontre une erreur, ça n’affecte pas le code du Worker et inversement.
Le Worker est capable d’envoyer des messages au script principal via l’API Messaging. Le script principal peut aussi envoyer des messages au Worker. L’API Messaging peut aussi être utilisée pour envoyer et recevoir des messages entre une <iframe> et sa page mère, même si elles ne sont pas hébergées sur le même domaine.
A noter : L’API Messaging est notamment utilisée pour les extensions de certains navigateurs tels qu’Opera ou Google Chrome. Ainsi, pour ce dernier, les scripts peuvent communiquer avec une page spéciale appelée « page d’arrière-plan », qui permet d’enregistrer des préférences ou d’exécuter des actions spéciales, comme ouvrir un nouvel onglet.
– Offline Web Application
Cette API sert à rendre disponible une page Web même si la connexion n’est pas active. Il suffit de spécifier une liste de fichiers que le navigateur doit garder en mémoire.
Quand la page est hors ligne, il convient d’utiliser une API comme Web Storage pour garder en mémoire des données, comme des e-mails à envoyer une fois la connexion rétablie, dans le cas d’un webmail.
Sous HTML5, la logique et la structure du langage est restée fidèle à elle-même. Le document doit toujours être déclaré sous doctype. Cependant, la page doit intégralement respecter la syntaxe XML en spécifiant l’encodage dans le prologue.
#3 Structure des documents
L’organisation des documents est désormais régie par des catégories qui le rendent plus lisible et compréhensible pour les moteurs de recherche.
– Le <header> contient tous les éléments qui doivent se trouver en introduction de la page. Il est complété par le <footer> en bas de page, où sont placées des informations relatives au contenu : date, auteur, coordonnées (importantes en référencement local).
– <section> regroupe le contenu selon des sections apparentes sur la page.
– <aside> créer une relation avec la balise précédente.
– <article> distingue une partie indépendante du reste du site, comme un commentaire, par exemple.
Le contenu illustratif et interactif est mieux géré :
– <figure>, <video>, <audio>, <embed>, <canvas> : autant d’exemples de balises permettant d’insérer du contenu non textuel mais néanmoins assimilable pour les robots des moteurs de recherche.
– <meter>, <time> ou <output> élargissent l’éventail des informations qui peuvent être intégrées à la page.
Pour résumer :
– Le HTML5 est la nouvelle version du langage de balisage HTML. Il a été conçu afin d’améliorer l’accessibilité et la sémantique et augmenter l’interactivité avec l’utilisateur.
– Cette nouvelle version n’est pas qu’un amas de nouvelles balises. Elle apporte aussi de nouvelles technologies utilisables au sein du JavaScript.
– Parmi les nouvelles API apportées par le HTML5, quatre sont intéressantes à approfondir : Canvas, Drag & Drop, File et Audio/Video.
