Les 5 mythes et vérités de HTML5

Actualité par (Alsacréations, Strasbourg)
Créé le , mis à jour le (52554 lectures)
Tags : xhtml, html5

Les mythes

Avec HTML5, mon site sera plus beau

HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu.

Cela signifie donc que rien ne change par rapport aux précédentes versions de HTML : il vous faudra toujours jongler avec habileté entre CSS, les images issues de la maquette graphique, éventuellement des effets en JavaScript, du SVG, voire Canvas, pour construire le côté visuel d'un document ou d'une page web.

Avec HTML5, mon site sera plus dynamique et réactif

Là aussi, les mêmes arguments de conception entrent en jeu : sans JavaScript et l'API DOM, l'interactivité reste coite. Or, JavaScript et le DOM sont des technologies qui évoluent depuis un moment déjà, sans avoir attendu HTML5. Les diverses optimisations mises en avant par les versions successives des moteurs d'interprétation font chemin commun.

HTML5 apporte donc des fonctionnalités, mais pas de "rapidité" au sens strict du terme. Le code JavaScript sera interprété exactement de la même façon, navigateur par navigateur.

Avec HTML5, je devrai tout réapprendre depuis zéro

HTML5 a été pensé notamment pour rester majoritairement rétro-compatible avec les précédentes versions de HTML, et faciliter le quotidien des intégrateurs avec une syntaxe quelque peu simplifiée. Si bien que la courbe d'apprentissage est très douce pour ceux qui ont déjà des notions générales concernant HTML.

En revanche, concernant toutes les API, il y a beaucoup à découvrir, pour ne citer que certaines d'entre elles : Web Storage, Web Workers, la géolocalisation, Canvas, Offline Web Applications, Drag & Drop, Server-Sent Events, Web Sockets, Web Messaging, History, et toutes celles qui sont en train de mijoter dans les groupes de travail du WhatWG, du W3C et des éditeurs de navigateurs (Apple, Google, Microsoft, Mozilla, Opera).

La présence d'API (interfaces de programmation) dans HTML5 est rendue nécessaire par les nouveaux besoins qui ont émergé ces dernières années, en termes de mobilité, de multimédia, d'interactions avec l'utilisateur. On ne se limite plus à une spécification de balises mais on s'oriente bien vers un langage puissant pour construire des applications web complètes, en synergie avec JavaScript.

Avec HTML5, je suis dans le Cloud

Refondre un site depuis zéro juste pour dire "je suis passé à HTML5" n'est pas significatif. Quel est le gain attendu ? HTML5 n'est pas un ensemble indissociable de fonctionnalités, il permet une transition douce avec des améliorations ponctuelles ne serait-ce qu'en se limitant aux simples balises et en mettant de côté les API : le balisage sémantique (nouvelles balises de section), les nouveaux éléments bien pratiques (video, audio, formulaires, etc), Microdata.

Et si vous changez le doctype par <!doctype html>, votre site est virtuellement en HTML5, puisque c'est ainsi que le langage est annoncé au navigateur ; mais n'exploitera aucune des nouveautés avant de plonger les doigts dans le code.

Concernant le fameux nuage, HTML5 dispose bien sûr d'API facilitant la mise en place d'applications web exploitant des données distantes (avec Web Sockets, XMLHttpRequest 2, etc), les stockant localement (avec Web Storage), exécutant des fonctionnalités en mode déconnecté (avec Offline Web Applications), et des traitements variés. Il s'agit donc d'un moyen, mais pas une finalité en soi.

Pour HTML5, je dois faire appel à des startups primées à LeWeb©™

Engouement, espoirs, marketing, font que le mot HTML5 est exploité à toutes les sauces, pour promouvoir des produits et services web, qui ne reposent pas nécessairement sur lui. C'est désormais un terme à la mode, pour regrouper tout et n'importe quoi (y compris ce que l'on peut faire avec JavaScript/CSS/AJAX), tout comme l'a été le fameux "web 2.0" et c'est bien dommage. Il n'est donc pas primordial de passer par une multinationale trempant dans le marketing, ou par une jeune pousse ayant procédé à une levée de fonds de quelques millions. Bien au contraire, ce sont les artisans du web qui sont les mieux informés au quotidien et les plus aguerris avec des situations concrètes. La plupart des intégrations réalisées par l'agence web Alsacreations.fr le sont désormais en HTML5, et ce en toute transparence.

Les grandes conférences où se retrouvent les courageux ayant déboursé un billet d'entrée à quelques milliers d'euros pour se taper dans le dos, tout en disant qu'ils vont révolutionner le monde avec des rationalisations de process en HTML5 sont à des parsecs de la réalité. [Ceci est un point de vue strictement personnel qui n'engage pas l'équipe d'Alsacreations]

Les vérités

HTML5 est une technologie d'avenir 

Durant de nombreux mois, les actualités mentionnaient une date de finalisation officielle de la recommandation W3C pour 2022. Or, il s'agit du même principe que pour les spécifications CSS et tous les autres standards qui ont vu le jour progressivement : rien n'empêche de s'en servir avant la publication finale de la recommandation, pour peu que les navigateurs implémentent les fonctionnalités HTML5, et que celles-ci restent stables à moyen ou long terme. Le processus de normalisation des groupes de travail HTML est long : il comprend de nombreux tests et critères de qualité à remplir avant de déclarer officiellement le langage spécifié en tant que standard.

Il s'agit donc bien - désormais - d'une technologie du présent (que des millions de sites exploitent déjà en production) qui a encore de nombreux tours dans sa poche, et de grandes évolutions en perspective. Il est fort probable que l'échelonnement par versions (4, 5...) soit délaissé au bout d'un moment ou modifié, étant donné la nécessaire réactivité face aux changements du web, ainsi qu'aux nouveaux besoins. C'est un choix qu'a déjà fait le WhatWG pour désigner l'ensemble sous le terme de Living Standard.

HTML5 est vaste

Oui, plus qu'avant, sans compter les compléments apportés par JavaScript et CSS, l'empilement des langages et des concepts à maîtriser s'accroît. Il ne faut plus considérer le web comme une soupe de tags. De gros progrès ont été accomplis. La réalisation d'applications web et de documents HTML réclame de plus en plus d'attention, de professionalisme et d'expériences. Les conséquences en termes de référencement, d'accessibilité et d'utilisabilité sont bien plus que jamais mesurées et ressenties à court terme.

Nous avons toujours évolué dans un univers dans lequel nos métiers (graphiste, intégrateur, développeur, administrateur) s'interpénètrent sans frontière nette, et tant mieux : il est toujours bon d'explorer toutes les voies menant à la réalisation d'un projet complet, de savoir quelles sont les implications de chacun. Ceci va aller en s'accentuant, le dynamisme développé côté client (navigateur) faisant de plus en plus appel à des dialogues avec le serveur, et avec un graphisme riche et dynamique.

HTML5 améliore le référencement

Avec une plus forte présence de la sémantique, avec de nouveaux éléments pour baliser le contenu (<output>, <mark>, <time>, <figure>, etc), avec les éléments de section (<article>, <nav>, <aside>, etc) et avec la venue des microformats directement via Microdata, HTML5 met le cap sur un web où tous les contenus seront amenés à être balisés avec soin, à être exploités, indexés, triés. C'est par ailleurs la vocation première de HTML dès ses débuts. Les résultats ne seront pas immédiatement visibles, bien que certains robots mettent déjà à profit les avancées réalisées par ces nouvelles approches. Nous savons tous que les algorithmes des grands moteurs de recherche (Google, Bing, Yahoo) changent jour après jour. À ceci, il n'y a pas de mystère : la seule voie recommandable est celle de suivre celle des bonnes pratiques,  d'éviter tous les artifices, bref, de rester naturel.

HTML5 est plus accessible

Un bon balisage sémantique, propre, utilisé à bon escient, peut améliorer l'accessibilité d'une façon générale. C'est une évidence qui existe depuis les prémices de HTML. De façon plus approfondie et outre les WCAG 2.0 qui peuvent s'appliquer à tout, WAI-ARIA est une démarche active en faveur de l'accessibilité, prise en compte dans la conception de HTML5. Elle est mise en oeuvre en complément de l'attention portée aux autres points et pièges classiques relatifs au web, notamment pour les applications web qui pourraient être construites autour de HTML5. L'abandon des plug-ins propriétaires va en ce sens, avec toutefois des écueils. Par exemple, Canvas reste un trou noir duquel aucune information ne sort. Les éléments média <video> et <audio> voient tout juste le sous-titrage pointer le bout de ses caractères.

Lorsque les agents utilisateurs et les assistants à la navigation (synthèses vocales, etc) exploiteront tous les pans de HTML5 de façon efficace, un grand pas aura été fait en avant. Consultez également l'état des lieux de l'accessibilité en HTML5.

HTML5 a plus d'affinités avec les mobiles et les tablettes

Le taux de renouvellement de ces plate-formes est plus soutenu, ce qui permet un renouvellement plus fréquent du parc des navigateurs mobiles. Ceux-ci supportent de plus en plus de fonctionnalités avancées, dont certaines sont clairement orientées vers la mobilité : les API HTML5 telles que Offline Web Applications, Web Storage, History, la géolocalisation, les nouveaux types pour <input> et les Media Queries (CSS3) sont pensés pour faciliter le développement sur des terminaux devant respecter des contraintes de mobilité (réseau à faible débit, parfois déconnecté, pour une surface d'affichage réduite et des économies d'énergie).

Avertissement : On parle ici de HTML5 en tant que successeur des précédentes spécifications HTML 4.x et XHTML 1.x. Dans l'absolu, l'évolution du langage est motivée par le W3C d'un côté - qui privilégie la numérotation de versions - et par le WhatWG de l'autre - qui préfère parler de "standard vivant" sans lui attribuer de numérotation rigide tant sa maturation doit rester souple et progressive.

Et vous, qu'en pensez-vous ?

Comment ressentez-vous l'agitation actuelle autour de HTML5 et CSS3 ? Avez-vous eu des expériences concluantes ? Abordez-vous avec sérénité les nouveautés ?

Commentaires

Victor BRITO a dit le

Une mise au point bienvenue.

À propos du symbole accompagnant « Le Web », aurais-tu, par hasard, confondu avec ® (marque déposée), à moins d'avoir voulu parler de ™ (marque commerciale) ? ;-)

cris_ a dit le

voilà un petit "brief" qui tombe à pic, en arrivant à la moitié de la lecture de "HTML5 une référence pour le développeur web", du même auteur ;o)

ThomasB a dit le

Article bienvenue mais j'ai des doutes sur "HTML5 améliore le référencement". Comme pour "HTML5, mon site sera plus dynamique", ça dépend ce qu'on en fait. Je n'ai pas encore vu d'article prouvant que les moteurs de recherches tiennent comptent de l'utilisation des nouvelles balises "sémantiques" dans leur index.

Par contre, je vois de plus en plus de site "single page app", utilisant Web Sockets & co. pour se mettre à jour. Et ça, ça n'aide pas pour le référencement.

o06 a dit le

personnellement je commence à développer mes nouveaux sites avec HTML5 pour anticiper ce qui est abordé dans le paragraphe intitulé "HTML5 améliore le référencement".

dew a dit le

Pour le référencement bien sûr, il ne s'agira jamais d'une science exacte. Ne rien faire est de toute façon peu productif ;) Certains robots - dont Google de mémoire - ont déjà commencé à prendre en compte des pratiques récentes, et surtout les 3 ténors du secteur sont à l'origine de schema.org qui fait la part belle à Microdata HTML5 pour le référencement (par ex. avec les Google Rich Snippets).

Lpu8er a dit le

Quelques raccourcis, en effet, dans un sens comme dans l'autre, c'est dommage.

"Avec HTML5, mon site sera plus beau"
De base faux, en effet. Et ça rejoint ce que tu dis sur CSS et le mélange de technos. On a tendance à assimiler HTML5 et CSS 3. Or, CSS 3 apporte son lot d'éléments pour embellir un site ou une appli. Mais on peut contrebalancer en déclarant que HTML5, avec ses nouveautés, PERMET de rendre un site plus sympathique, ergonomique, et plaisant, en évitant d'avoir recours à des fixs divers (je pense aux différents scripts JS basés sur des balises fictives qui manipulent le DOM comme des sales, pour un menu imaginons). Le display par défaut de certains éléments (menu, toujours en exemple) pourrait donc être avancé en tant que contre-argument.

"Avec HTML5, mon site sera plus dynamique et réactif"
Je suis plus réservé. Pour preuve, avec le simple attribut "required", je m'épargne un script JS de vérification (pour la vérif client).

Et oui, pour le référencement et update dynamique, c'est toujours une petite plaisanterie. Mais le domaine du référencement EST une plaisanterie dans un sens, donc on ne peut pas y dire grand chose.

Cette mise au point en fixera probablement certains, néanmoins :) Merci dew !

o06 a dit le

personnellement je commence à développer mes nouveaux sites avec HTML5 pour anticiper ce qui est abordé dans le paragraphe intitulé "HTML5 améliore le référencement".

riplay777 a dit le

Article intéressant. Merci de corriger la faute prémisses --> prémices.

dew a dit le

Prémisse est une orthographe acceptée.

Sventovit a dit le

Lu et approuvé.
Pour ce qui concerne le référencement, les balises de structure servent avant tout la reconnaiss

Sventovit a dit le

… crottalors… j’ai appuyé sur une mauvaise touche.
Je poursuis :
[…] reconnaissance du "terrain" (la page) par les robots.
À ce jour, les balises dites "sémantiques" propres à HTML5 n’apportent rien au référencement ; en tout cas je n’ai jamais pu en apporter la preuve.

Quant à la modernité d’HTML5 - « technologie d'avenir » - c’est, pour moi, une évidence. HTML5 sera le noyau qui nous évitera les pépins des OS en les éliminant.
Poil aux dents.

ptitjuju a dit le

Attention ne pas confondre "site" et "application" web:
- Le site est un outil de diffusion, d'échange d'information et de contenu (multimedia) dynamique ou statique (communication, information, formation)
- L'application est un "logiciel" permettant de remplir une fonctionnalité apportant de la productivité aux différents métiers d'une entreprise.

la technologie web est la même, mais l'usage est différent. Et aujourd'hui,la technologie html5/css3/JavaScript ne suffit pas à elle seule pour répondre aux besoins d'une entreprise (manque d'outils industriels pour les devs/tests/indus/qualité de code, de fiabilité au sens large, de normalisation, de bonnes pratiques).

celà ne veut pas dire que la technologie n'a pas d'avenir, bien au contraire... elle est une alternative ou un complément aux technologies riches d'Adobe et Microsoft (AIR/Flash/Flex et SilverLight)...

JackNUMBER a dit le

C'est bien de mettre les choses à plat mais beaucoup de personnes qui utilisent ce "terme" à tord ne le liront pas =/
Je suis tombé récemment sur un portfolio avec le logo du bouclier orange. Ayant quelques bases en HTML5 et étant très curieux, j'ai foncé regarder la source, et là... pas de HTML5, rien du tout, même pas la sémantique, même pas le doctype. Pas de CSS3 non plus. C'était du HTML 4.0 un peu en bordel (même pas de XHTML). J'ai donc regardé ses dernières créations : des sites en full image 1024x768 découpée sur 'toshop...
Je suis parti rapidement. Déçu.

C'est le genre de comportement qui me dégoute. Comme des clients qui veulent un site en HTML5 absolument alors que d'1 leur cible risque de pas pouvoir l'interpréter (gros comptes) et de 2 aucunes fonctionnalités de cette version n'est sollicitée. Irraisonnable.

jmlapam a dit le

Cela fait du bien de démystifier le "good is new" mais pourquoi faire apparaître canvas dans les mythes?

Merlin a dit le

En m'excusant pas avance pour ma naïveté, par delà les avancées significatives de HMTL5, j'ai cru comprendre que de nombreuses évolutions ne sont pas supportées par les navigateurs les plus communément utilisés (e.g. vu sur le forum : Les Media Queries ne sont pas supportées par IE7 et IE8).
Comment gérer dans ce cas les disparités ?
Est-ce au prix d'un nouveau numéro de contorsionniste comme on en a connu (connait) sur l"interprétation du CSS avec IE6 versus Mozilla (par exemple) ?

Note : D'ailleurs, cette interrogation vaut aussi pour CSS3

JulienJolly a dit le

Article intéressant. Merci :)

Raphael a dit le

@Merlin : Les Media Queries sont du domaine de la mise en forme, donc placées dans les spécifications CSS3, et non HTML5.
Pour le reste, la réponse est assez simple : les navigateurs nés en même temps (ou après) les différentes spécifications HTML5 sont "compatibles".
IE7 et IE8 étant nés avant HTML5, il est assez normal qu'ils ne supportent pas les dernières avancées dans ce domaine, mais de nombreuses alternatives existent (souvent basées sur JavaScript).

Raphael a dit le

@jb_gfx : De tête je dirais qu'il n'y a que le Doctype et quelques détails comme les attributs Contenteditable, Drag and Drop et Defer qui sont supportés nativement par les anciennes versions d'IE. Quand tu dis "pas mal", tu pensais à quoi ?

EDIT : environ 19% de HTML5 est supporté par les anciens IE -> http://caniuse.com/#cats=HTML5 (en comptant le support partiel) :/

Ascarius a dit le

Bonjour,

Vous dites dans l'article :
http://www.alsacreations.com/article/lire/137...
de charger html5shiv depuis :
html5shim.googlecode.com/svn/trunk/html5.js

C'est mal !

Un SVN sur googlecode.com n'a rien à voir avec un CDN comme googleapis.com
Le script ainsi reçu n'est PAS mis en cache ni compressé; ce qui est le parfait opposé de ce qu'on cherche en utilisant googleapis.com

Un article complet sur le sujet : http://zoompf.com/blog/2012/05/html5shiv-and-...