Zoom sur le HTML5

Toujours en cours de travail, la cinquième révision du HTML est d’ores et déjà exploitée par de nombreux sites internet. Au-delà du  buzzword, le HTML 5 a pour objectif de répondre aux nouvelles exigences du Web, en facilitant la publication des contenus web 2.0 et en permettant le développement d‘applications plus légères. Le HTML5 recouvre donc un ensemble de technologies qui révolutionnent le concept du  web.

Une structure HTML améliorée :

Grâce au HTML5, le Doctype subit un rajeunissement en devenant unique, concis et sans rajout d’une URL. Un doctype est destiné à valider les pages qui respectent les normes W3C choisies, il permet aux navigateurs d’identifier comment interpréter la page web.

La structure du HTML 5 évolue par rapport à son prédécesseur et se compose de différents éléments destinés à remplacer l‘utilisation abusive des <div> par des règles de nommage sémantiques. Ainsi la structure type d’une page web change sensiblement de HTML4 à HTML5.

Schéma différence HTML4 - HTML5

Ce nouveau modèle a pour caractéristique de faciliter la lecture des pages web par les navigateurs (dans le cadre de l’accessibilité par exemple) ainsi que leur indexation par les moteurs de recherche. Ce dernier sera capable de distinguer le contenu « principal » d’une page (<article>) du pied de page ou de l’entête ou de contenus annexes (<aside>)…

Parmi les nouvelles balises HTML…

Destinés à mieux répondre aux exigences et à simplifier le développement du Web 2.0, les évolutions  du HTML5 sont si nombreuses qu’il serait ambitieux de toutes les énumérer ! Il est toutefois possible de les consulter dans leur intégralité sur le site du Consortium W3C.
Parmi les nouvelles balises qui caractérisent le HTML 5, citons :

Les balises qui optimisent la sémantique des pages web

<header>, <footer> et <nav>: ces nouveaux éléments sont destinés à identifier l'en-tête, le pied de page et la barre de menu. Ils sont des alternatives adéquates à l’élément <div> souvent utilisé par nécessité, à cet effet.

<article> : cet attribut est utilisé pour les articles distincts, les messages des blogs et du contenu…. Il est une composante de l’attribut <section> et intègre un <header>, une <section> et un <footer>.

<aside> : généralement situé sur le côté d’une page, il est destiné à proposer du contenu additionnel au contenu principal. Il peut être utilisé pour des effets typographiques, de la publicité, des groupes d'éléments de navigation ou pour tout autre contenu considéré comme distinct du contenu principal.

Des fonctionnalités multimédias révolutionnaires

Rien qu’à eux seuls, <audio> et <video> révolutionnent l’utilisation du HTML par l’intégration de vidéos et de bandes audio aussi facilement que l’insertion d’un lien dans une page HTML4.

Aujourd’hui le moyen le plus répandu pour insérer une vidéo sur une page web est l’utilisation des éléments <object> ou <embed>. Pour lire une vidéo ou un fichier audio, l’utilisation d’un plugin compatible avec le fichier est nécessaire. Or ces plugins s’avèrent être une source d’instabilité pour les navigateurs.

Grâce aux nouvelles balises <audio> et <video>, les formats multimédias deviennent des éléments du code à part entière. Ils peuvent être insérés à partir d’une simple url et redimensionnées en utilisant des transitions CSS. Cette facilité d’intégration est un réel avantage à l’ère du web 2.0. En revanche, tous les navigateurs n’exploitant pas la même technologie pour lire les formats vidéo,  il est nécessaire d’encoder les vidéos en plusieurs formats pour lire la même vidéo sur plusieurs navigateurs.

De nouvelles possibilités offertes aux navigateurs web

Parmi l’ensemble des améliorations qui définissent le « HTML5 », on retrouve tout un champ de nouvelles possibilités pour nos navigateurs web :

• La fonction de géolocalisation permet d’obtenir la position géographique de l’utilisateur dans le navigateur. Cette fonctionnalité facilite la création d’applications de recherche (commerces, restaurants, cinémas à proximité) ou de publication géolocalisée (foursquare, twitter, facebook...)
• La fonction de  « cache » offre la possibilité de stocker sur le navigateur les fichiers html, javascript et CSS. Ainsi, les pages Internet sont consultables sans connexion Internet, à condition que la page ait été visitée au moins une fois.
• Le« stockage des données » favorise la sauvegarde côté client  de toutes les données nécessaires à l’affichage d’un site web ou d’une application. En plus d'améliorer considérablement la vitesse d’affichage, cela permet de proposer des applications web mobiles bien plus riches qu’actuellement, en s’affranchissant des vitesses de connexion à internet bien plus lentes sur ces terminaux. Google a été l’un des premiers à utiliser cette technologie pour rendre Gmail accessible hors connexion.
• La possibilité de créer et manipuler des animations 2D (via l’API « Canvas ») ou 3D (via l’API « Webgl »). Cela veut dire toujours plus de contenus ludiques sur vos navigateurs PC ou mobiles (sans nécessiter de plugin comme flash).

Le CSS3 : petite révolution à lui tout seul

Destiné à décrire la présentation des documents HTML et XML le Cascading Style Sheet est devenu un standard du web depuis les années 2000. Apparu en 1999, le CSS3 réunit aujourd’hui 40 modules, dont la majeure partie est stable. Voici les principales nouveautés, regroupées au sein de « modules » :

Multiples Background : pour des fonds de page riches ou animés

Le CSS3 permet d'appliquer plusieurs fonds à un élément en utilisant différentes propriétés. Parmi ces dernières, on compte : background-image, background-repeat, background-position et background-size. Afin d'inclure plusieurs plans dans un seul élément, il est nécessaire de spécifier leurs propriétés en les séparant par des virgules.

Cette illustration est composée de deux images. La première est celle du « mouton » positionné au centre, bas, la seconde « l’herbe et le ciel ».

On peut ainsi réaliser des fonds qui s’agrandissent en fonction du contenu, sans multiplier les <div> imbriqués : en HTML4, il faut jusqu’à 4 div imbriqués, là où un seul suffira en HTML5.

Le code est bien plus lisible et plus rapide : on peut réellement parler de séparation du contenu et de la présentation.

Selectors : pour alléger votre code HTML/css

Selectors CSS3 permet de définir plusieurs styles CSS pour différents éléments. Ainsi, il est possible de définir les styles CSS pour des zones avec plus de précision. Le nombre de classes et les id étant réduits, l’avantage de la fonctionnalité selectors permet de réduire le balisage, de gagner du temps mais nécessite une plus grande organisation de la feuille CSS. Par exemple, il est possible de différencier des éléments div sans utiliser la classe id : div.article {} div.header  {} div.content {} div.footer  {} div.aside ….

Web Fonts : pour sortir des polices vues et revues sur le web

Les polices les plus couramment utilisés sur le web sont Arial, Helvetica, Verdana et Georgia parce que la plupart des ordinateurs les ont installées par défaut. Le CSS3 outrepasse ces standards en imposant la police déterminée par le serveur.

Rounded Corners : laissez le navigateur web embellir les images à votre place

Ajouter des coins arrondis à une image est une tâche qui peut s’avérer longue pour un résultat relativement simple. Avec le CSS3, cette tâche devient un jeu d’enfant grâce à la propriété border-radius. Cette propriété définit la courbure pour chaque coin de la boîte.

Aujourd’hui reconnu par les géants du web comme Google, Apple, Mozilla et Microsoft, le HTML5 est exploitable mais seulement sur les navigateurs récents. Voici l’exemple d’un site qui exploite le HTML5 pour promouvoir la lutte contre l’esclavage moderne et la surconsommation. Le monde du web évolue à une telle vitesse que le grand public a parfois des difficultés à suivre ses tendances, c’est pourquoi il convient de déterminer à qui s’adresse le site avant d’exploiter cette technologie. En revanche le soutien des industriels et des communautés du web s’avèrent prometteur pour que le HTML5 devienne rapidement le standard du web.

Références : W3C.org

Cet article a été rédigé par Raphaël Franchet, Expert IHM et Accessibilité Web chez Anyware Services.