Quelles nouveautés propose HTML 5.1 ?

Sans HTML (« Hypertext Markup Language » ou langage de balisage d’hypertexte en français), Internet ne serait pas ce qu’il est aujourd’hui : ce langage de marquage structure les textes, images ou liens et constitue la base du World Wide Web. Le Web a toutefois bien changé au fil du temps. L’aspect multimédia est devenu un facteur important pour les Webdesigners. Les contenus audio et vidéo ainsi que l’affichage sur mobile gagnent sans cesse en importance.

Pour répondre aux diverses attentes des Webdesigners et utilisateurs, le langage de balisage HTML a été développé par le Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG) après plusieurs années de stagnation. Un nouveau HTML est disponible depuis l’automne 2014, HTML5, que nous avons présenté dans notre guide digital IONOS. Il permet d’intégrer de nombreux contenus plus facilement. Nombre de plugins et autres alternatives sont ainsi devenus obsolètes. La petite mise à jour HTML 5.1 est aujourd’hui disponible. Mais comment fonctionne la procédure jusqu’à ce qu’un nouvel HTML soit publié ? Et quelles sont les principales nouveautés de la mise à jour actuelle ? Quelles fonctionnalités ne seront probablement pas applicables dans sa nouvelle version ? Et que cela signifie-t-il pour les exploitants de sites Web ?

Il avait fallu quinze années pour qu’une nouvelle version d’HTML, 4.01, apparaisse au grand jour. Cette fois-ci, la mise à jour était bien plus rapide : près de deux ans après HTML5, l’adaptation HTML 5.1 est apparue. Cette accélération des évolutions est logique au regard des changements massifs et rapides du World Wide Web actuellement. De premières ébauches ont été préparées par groupes de travail et les caractéristiques HTML ont été sélectionnées parmi une liste de propositions. La faisabilité des différents éléments a été étudiée dans le cadre d’une vaste phase de test. Une fois cette phase de test achevée vient la publication officielle des recommandations de standards. Dans le cas de HTML 5.1, ce processus s’est produit dans un dialogue avec la communauté : c’est ainsi que le W3C a publié ce nouveau HTML sur GitHub. La communauté avait alors plus que jamais la possibilité de faire avancer de manière intensive le nouveau standard du Web ainsi que de donner des retours rapides et faciles. GitHub est un service de gestion des versions de projets logiciels. Ainsi la contribution de nombreux développeurs peut être fusionnée automatiquement avec le logiciel librement accessible, y compris dans le cas de HTML 5.1.

Une nouveauté avec HTML 5.1 est qu’il est compatible avec la plupart des navigateurs Web courants. Au centre des innovations se trouve l’adaptation du contenu selon le Responsive Web design. Le problème jusqu’à présent était principalement celui d’un mauvais affichage des contenus avec des résolutions variables. Dans ce but, HTML 5 devait déjà proposer l’élément <picture> comme standard mais il n’en était rien pour des raisons de temps. Les développeurs Web utilisaient toutefois l’élément sans que cela ne soit publié officiellement. Tous les navigateurs courants sont entre-temps devenus compatibles avec l’élément<picture> : sa standardisation avec le nouveau HTML l’a rendu officiel.

L’élément <picture> est un container : des fichiers image peuvent être intégrés via différents éléments source. Grâce à cela, seules les sources d’images adaptées à la résolution et la taille de l’écran utilisé sont chargées, ce qui économise un temps de transmission précieux et avantage la conception mobile d’un site Internet. Pour économiser de la bande passante, un contenu alternatif peut être livré sur les écrans à haute résolution. Cependant, cela nécessite l’attribut <srcset>, introduit avec HTML 5.1 : il place les images de différentes tailles en relation.

L’exemple suivant montre comment intégrer l’élément Fallback avec <img> :

<picture>

<source media="(min-width: 1024px)" srcset="https://www.ionos.fr/digitalguidepompiers-1600.jpg">

<source media="(min-width: 480px)" srcset="https://www.ionos.fr/digitalguidepompiers-480.jpg">

<!---Fallback---> <img src="https://www.ionos.fr/digitalguidepompiers-480.jpg" srcset="https://www.ionos.fr/digitalguidepompiers-320.jpg" alt="fêtedespompiers 2014">

</picture>

Les éléments <picture> et <srcset> vont main dans la main. Bien que les dernières versions des navigateurs Web courants soient déjà compatibles, un Fallback reste une alternative pour les navigateurs non compatibles pour s’assurer que les images s’affichent correctement. Les exigences sont définies dans l’élément source concernant les propriétés d’affichage écran telles que la densité ou la largeur de pixels.

De nouveaux types d’éléments <input> ont déjà été introduits avec HTML5. Parmi ces derniers, « email », « url » ou « date », permettant d’entrer des adresses email, URL, ou encore la date. Le type de champ de saisie avec <input> est toujours défini avec des attributs « type ». Avec type = « month » et type = « week », vous pouvez, en dehors du jour et de l’heure, sélectionner le mois et la semaine du calendrier. La fonction est également déjà prise en charge par la plupart des navigateurs. Ainsi, sa normalisation peut être considérée comme une conséquence logique avec HTML 5.1.

Une nouvelle fonction HTML doit être recommandée par au moins deux navigateurs indépendants via le W3C pendant la phase de test. Elle est caractérisée par « at risk » (« à risque ») si elle ne présente pas les dimensions nécessaires pour la normalisation avec les navigateurs ou développeurs.

Moins répandu que l’élément <picture>, la balise <dialog> est actuellement, dans son état actuel, uniquement prise en charge sur les navigateurs Chrome et Opera. Des rapports ont été par conséquent reçus peu avant HTML 5.1 : certains articles évoquaient une standardisation, mais le site officiel du W3C indiquait cependant que l’élément <dialog> était supprimé. Avec ce dernier, l’intégration de fenêtres pop-up se fait plus facilement. Un code JavaScript est en temps normal nécessaire pour cela. Les difficultés se trouvaient auparavant principalement dans l’ouverture et la fermeture. Les navigateurs Web qui ne sont pas encore compatibles avec <dialog> peuvent certes afficher la fenêtre, mais pas la fermer. Pratiquement tout contenu peut être mis en œuvre au sein de l’élément <dialog> : textes purs ou images.

En dehors de l’élément <dialog>, <keygen> et <menu> sont aussi sur la liste des cibles à risque pour le nouveau HTML. Ces deux derniers, cependant, ont été conservés selon les indications du W3C. Ils comprennent <menuitem> et l’attribut « contextmenu ». Avec les éléments et attributs, vous pouvez créer des barres d’outils et des menus contextuels tels que nous les connaissons sur les applications de bureau. Via l’élément <menu>, vous pouvez modifier le type de barre d’outils. 

Une destinée également incertaine est celle de l’élément <keygen>. Le générateur de paires de clés cryptographiques a initialement été développé par Mozilla. Microsoft n’avait pas d’intérêt pour une implémentation et Google a même demandé un retrait de la norme en juillet 2015. La stigmatisation de l’Alt-risk n’était ainsi pas surprenante. La recommandation proposée par W3C pour HTML 5.1 de septembre 2016 gardait déjà l’élément. Cependant, ce dernier est affiché comme « en cours de suppression » : son utilisation n’est pas recommandée.

Les exploitants de sites Web peuvent facilement utiliser les éléments recommandés et les attributs du nouveau HTML. Comme décrit précédemment, nombreux sont ceux à déjà utiliser ces pratiques. Il convient de regarder de plus près la liste à risque et à suppressions, en plus de la norme officielle. Si vous avez utilisé des éléments mentionnés comme à risque par le passé, vous devriez mettre en œuvre différemment votre projet. Une forte compatibilité avec autant de navigateurs et de terminaux que possible devrait être le but de tout exploitant de site Internet, aujourd’hui plus que jamais.

Il s’avèrerait judicieux pour les Webmasters à l’avenir de jeter un coup d’œil à la page officielle du W3C. Après l’achèvement d’HTML 5.1, on parle déjà de la version suivante, HTML 5.2. Un premier projet des changements nécessaires est déjà disponible. Ainsi, le rythme des mises à jour HTML semble s’accélérer de manière significative. Cela signifie pour les exploitants de sites Web qu’ils pourront réagir plus rapidement aux bugs et s’adapter à l’évolution des besoins. La publication d’HTML 5.1 via GitHub propose par ailleurs la possibilité de participer activement aux processus d’amélioration en tant que développeur.