Le HTML5 est un terme de plus en plus utilisé, vulgarisé par l’usage des mobiles et certaines démonstrations technologiques utilisant par exemple le ‘canvas’ : composant de HTML qui permet d’effectuer des rendus dynamiques d’images bitmap via des scripts. Il est en passe de devenir un élément incontournable des applications web, ce qui est déjà le cas pour les applications web mobiles.

Après une présentation des avantages de l’utilisation de l’HTML5, nous en aborderons le principal frein à savoir la difficulté de fonctionnement sous d’anciens navigateurs. Nous vous présenterons des solutions de contournement.

Note : Cet article n’abordera pas les propriétés du CSS3. Cet article ne décrira pas non plus les différences entre le HTML4 et le HTML5, pour une liste exhaustive de ces différences je vous invite à visiter la page dédiée du W3C. Enfin, l’élément ‘canvas’, ‘le stockage local’, ‘la mise en cache’ ou encore les ‘web sockets’ ne seront pas abordés et feront l’objet d’autres articles.

Apports du HTML5

Le web sémantique

Selon le consortium W3C, le web sémantique est un cadre d’échange de données réutilisables par différentes entités (applications, entreprises…).

Le web sémantique est l’un des apports majeurs du HTML5. En créant de nouvelles balises et en adaptant d’autres, le W3C a cherché à rendre plus accessible pour une machine ou un programme informatique le contenu d’une page.

Structure de la page

Dans la quasi-totalité des sites internet HTML on retrouve une structure identique ou dérivée de celle-ci :

Structure html

Avant le HTML5, la bonne pratique consistait bien souvent à nommer les blocs par leur identifiant, ce qui donnait le code suivant :

{code type=html}

{/code}

Le div n’ayant aucun sens par lui-même et ne servant qu’à décrire un bloc, il est rapidement apparu comme trop limité.

L’équivalent en HTML5 est le suivant :

{code type=html}

{/code}

Nous passons donc à des blocs sémantiquement corrects, un programme informatique pouvant alors comprendre le sens de chacun de ces blocs sur la page. Par ailleurs ces blocs améliorent la compréhension du code. Voici une explication de ces différentes balises :

  • ‘Header’ ne se contente pas d’être une norme de nommage, il définit de façon plus générale l’élément supérieur d’un bloc. Il introduit un élément, que ce soit une page, un article ou encore un formulaire. Il contient typiquement un élément de titre du type Hn. ‘Footer’ a le même type de comportement que ‘Header’ mais pour le bas d’un élément, il contient généralement des informations supplémentaires sur le contenu de l’élément.
  • ‘Nav’ offre un cadre sémantique simple pour la barre de menu. Il entoure généralement un ‘markup’ html du type :

    {code type=html}

    • Accueil
    • Equipe

    {/code}

  • ‘Aside’ est utilisé pour apporter des informations complémentaires au contenu principal ou un éclairage. On pense le plus souvent à la ‘sidebar‘ quand on parle de la balise aside. Le contenu de la balise aside doit obligatoirement être lié à son élément parent.
  • ‘Section’ décrit une partie à part entière de la page ne rentrant pas dans le cadre d’éléments comme ‘Header’, ‘Footer’ ou encore ‘Aside’. Dans notre exemple nous nous en servons par exemple pour décrire le contenu principal ou encore l’introduction.

Structure des blocs

Avant, la syntaxe de la structure d’une page HTML était peu normalisée, celui des blocs l’était encore moins. HTML5 apporte deux solutions :

  • des balises nouvelles, propres aux blocs
  • la logique d’une structure de page transposée au bloc.

Prenons trois exemples : le haut de la page, un article de blog et une image.

Haut de la page

{code type=html}

Nom de mon application

Description courte

{/code}

Le hgroup permet de créer un bloc autonome disposant de sa propre hiérarchie Hn (H1, H2, H3…). Il permet donc d’éviter d’avoir recours à un H3 pour styliser un titre important plus tard dans la page. Le respect d’une bonne hiérarchie Hn étant important dans le cadre du SEO, par exemple.

Article de blog

{code type=html}

Titre de l’article

Texte

texte

texte

texte

Nom de l’auteur

texte

{/code}

Dans cet exemple, deux nouveaux éléments sont introduits :

  • un article qui définit clairement un écrit indépendant des autres
  • time qui permet de définir clairement la date d’un article en définissant une norme.

Attention l’élément article n’est pas à utiliser que pour les articles. Un article peut contenir d’autres articles, et les commentaires d’un blog par exemple peuvent être entourés de la balise article. Cette balise devrait être utilisée pour définir un bloc gardant du sens sans son contexte.

Une image

{code type=html}

Description de l’image

{/code}

L’importance de lier une image à une description ne vous a sans doute pas échappé. Cette action était pourtant extrêmement peu pratique avant le HTML5, ou l’on se contentait le plus souvent de créer un bloc contenant une image et un paragraphe, rendant très difficile, pour une machine, la liaison entre l’image et le paragraphe. En introduisant ‘figure’ et ‘figcaption’ le HTML5 permet de lier simplement une image à sa description.

Le HTML5 apporte également une souplesse supplémentaire au quotidien des développeurs.

Les formulaires

Le formulaire, élément incontournable d’une application web, est simple en apparence. Pourtant mal réalisé, ils seront la source de nombreux désistements (incompréhension, manque d’informations, temps pour remplir le formulaire…).

Validation

Le HTML5 permet de définir pour les champs de formulaire de nouveaux types (ou catégories). Ainsi, soumettre un email invalide dans un champ du type email par exemple, donnera le résultat suivant :

Validation html5

Vous retrouverez ici l’ensemble des types disponibles.

D’autres éléments de validation apportées par le HTML5 contribuent à l’amélioration du travail des développeurs: ‘l’attribut required’ et les ‘regular expressions’.

  • Le premier permet d’indiquer que ce champ est obligatoire
  • Le second permet de valider un champ selon une expression régulière du type : pattern= »[A-Z] ». Utiliser le mot « test » dans un champ ayant cette expression régulière donnera le résultat suivant :

Regex HTML5

Placeholders

Le texte de remplacement définissant en général le type de valeur attendue pour ce champ est aussi à souligner. Prenons par exemple le champ d’un moteur de recherche, 4 états sont attendus :

  • Un texte s’affiche à l’intérieur du champ : ‘Votre recherche’
  • L’utilisateur clique sur le champ, le texte de ‘Votre recherche’ disparaît sans autre manipulation
  • L’utilisateur tape sa requête et la valide, il est important de noter qu’il ne doit pas avoir à sélectionner le texte présent dans le champ et le supprimer avant de pouvoir taper, le texte par défaut doit s’effacer lors du focus
  • Les résultats affichés ne sont pas satisfaisants pour l’utilisateur, il veut affiner ou corriger sa requête, le comportement de la deuxième étape ne doit alors pas être reproduit et l’utilisateur doit pouvoir cliquer dans le champ sans que le contenu ne s’efface

Ces 4 états définissent un comportement prévisible et incontournable, qu’il était jusqu’à maintenant relativement fastidieux à reproduire. En définissant l’attribut ‘placeholder’, HTML5 répond à l’ensemble de la problématique.

{code type=html}



{/code}

Autofocus

L’attribut ‘autofocus’ permet donner le focus à un champ sans passer par le javascript. Comme le ‘placeholder’ il s’agit d’un élément très important des interfaces, souvent sous-utilisé par manque de souplesse.

L’ensemble des éléments de formulaire sont bien évidemment combinables.

La vidéo et l’audio

Une des fonctions les plus connues du HTML5 est le support en natif de ces deux médias très utilisés sur internet. La solution actuelle consistant le plus souvent à utiliser un player flash.

La vidéo

{code type=html}

{/code}

Le navigateur choisira de lui-même le format vidéo à utiliser.

HTML5 apporte donc l’élément video permettant d’afficher au sein de la page HTML une vidéo, à la manière des images avec img.

Trois points sont à noter sur cet élément :

  • ‘Preload’ permet de précharger une vidéo dès le chargement de la page (à utiliser avec parcimonie pour limiter la consommation de bande passante)
  • ‘Controls’ permet d’afficher la barre de progression, le bouton de lecture/pause et le son (chaque navigateur internet affiche les contrôles de manières différentes)
  • Le W3C n’ayant pas choisi de format pour son implémentation de la vidéo, vous devrez donc fournir vos vidéos dans des formats différents en fonction des navigateurs

L’audio

{code type=html}

{/code}

L’élément audio fonctionne de la même façon que video, et rencontre les mêmes problématiques de formats.

Contenu éditable

HTML5 introduit l’attribut ‘contenteditable’ qui peut rendre un bloc de texte directement éditable depuis le navigateur. Ce type de technique peut s’avérer très utile par exemple dans le cadre d’un CMS.

Utiliser le HTML5

Le sujet n’a volontairement pas été abordé avant, mais le HTML5 ne devant pas être finalisé avant plusieurs années, les navigateurs sont encore très loin de supporter l’ensemble des fonctions décrites ici, et pour une fois internet explorer n’est pas le seul 😉 .

Nous allons nous atteler à vous présenter des solutions de contournement et présenter des fonctions que vous pouvez utiliser dès maintenant. Des contournements javascript sont souvent possibles. Il faut proposer des solutions aux navigateurs ne supportant pas HTML5, comme par exemple les validations Javascript côté client, qu’il faut doubler par une validation côté serveur.

Quoi utiliser dès aujourd’hui ?

Dès aujourd’hui, vous pouvez facilement mettre en place HTML5. Vous devrez cependant utiliser un script qui comble une lacune d’Internet Explorer (avant sa version 9).

IE dans ses dernières versions ne sait pas sélectionner les éléments inconnus, la solution étant de créer à l’aide de javascript les éléments apportés par le HTML5. Ce contournement réalisable à la main a été packagé dans différentes solutions :

Une fois ce script mis en place vous pourrez mettre en place les actions suivantes :

  • Utiliser le doctype HTML 5 : < !doctype html>, ce nouveau doctype ne vous apportera rien en tant que tel mais représente un doctype valide, court et simple à utiliser dès maintenant
  • Retirer le type de vos balises script
  • Utiliser les nouveaux éléments du type : header, footer, aside, section, article…

Comment aller encore plus loin ?

Détecter les fonctions supportées par le navigateur de l’utilisateur

Une solution rapide consiste à créer un élément en javascript et tester s’il possède l’attribut recherché.

Une meilleure solution consistant à utiliser une librairie javascript : Modernizr Modernizr. Cette librairie permet également de tester le support du CSS3 et d’appliquer facilement des styles à des éléments précis, reprenons l’exemple de leur site :

  • .multiplebgs div p {} => S’appliquera aux navigateurs supportant les backgrounds multiples
  • .no-multiplebgs div p {} => S’appliquera aux navigateurs ne supportant pas les backgrounds multiples

L’intérêt est indéniable, on passe d’un système de hacks et feuilles de styles séparées, peu lisibles et difficilement maintenables à une structure simple et pratique.

Vous pouvez évaluer le support du HTML5 par votre navigateur sur cette page : http://html5test.com/.

Utiliser la balise video/audio

Au delà des différents formats de vidéos à proposer, il faut également prévoir des solutions de contournement pour les navigateurs ne supportant pas le HTML5. La solution la plus simple consistant à proposer un lien de téléchargement direct de la vidéo, une solution plus évoluée consistant à afficher un player flash si le navigateur ne supporte pas HTML5 et la solution la plus complète consiste à utiliser des solutions gérant l’ensemble de cette problématique.

Solutions pour la vidéo :

Solution pour l’audio :

Utiliser un framework HTML5

Ce sera le dernier point de cet article, mais pas le moindre, si vous ne deviez tester ou mettre en pratique qu’un des points évoqués ici, ce devrait être celui-ci : utiliser HTML5 BOILERPLATE ou du moins regarder ce qu’il propose et ce que vous n’appliquez actuellement à votre application.

Ce framework html est un ensemble des meilleures pratiques regroupées, pour créer un environnement HTML(5)/CSS/JS de départ à vos applications. Il vous montrera le chemin pour de nombreuses autres améliorations : performance, tests, dégradation gracieuse, amélioration progressive, support cross browser,…

Pour les fonctions non prises en compte par le framework vous pouvez vous référer à cette liste d’outils dédiés vous permettant de mettre en place dès maintenant certains points apportés par le HTML5.

Conclusion

Afin de synthétiser les différents points vus dans cet article je vous propose ce tableau récapitulatif suivant :

APPORTS LIMITES ACTUELLES
  • Web sémantique
  • HTML structuré
  • Simplification des formulaires
  • Vidéo
  • Audio
  • Géolocalisation
  • Canvas
  • Stockage local
  • Navigation offline
  • Support des navigateurs limité
  • Spécification HTML5 en cours d’écriture

Les nombreux apports du HTML5 notamment sur la sémantique et la structure des pages, permettent au HTML de préparer les sites des prochaines années.
Néanmoins de nombreux aspects sont encore à l’état de concept ou difficilement utilisables en l’état : microdata, gestion des périphériques (webcam par exemple), l’annulation des actions,…

De plus, le faible niveau de support de HTML5 dans les navigateurs. Par ailleurs, les importants délais de migration des navigateurs dans les entreprises viendront ralentir l’adoption d’HTML5 dans les applications d’entreprise.

Si certains éléments de la spécification sont à adopter dès aujourd’hui (doctype, utiliser les nouveaux éléments), d’autres nécessitent d’attendre la stabilisation des normes et de leur support réel par les navigateurs.

HTML 5 représente dés aujourd’hui le meilleur moyen d’émanciper les applications mobiles de leurs terminaux. En effet, HTML dans sa version 5.x permettra de créer des applications mobiles dont l’ergonomie n’aura pas à rougir par rapport aux applications natives.

Je vous renvoie à mon article précédent sur les WebApp.